Jump to content
Search Community

Can we achieve like this text animation effect with GSAP ?

JentiDabhi test
Moderator Tag

Recommended Posts

16 hours ago, Cassie said:

Screenshot 2021-07-28 at 13.52.12.png

If you take a look in the code of the site you linked to - they are animating a lot of masks.

@Cassie Thanks for your replay I have set like this mask structure but in GSAP timeline its not getting same effect as per reference site
I have set like this : https://prnt.sc/1hgcz80
GSAP timeline like this: https://prnt.sc/1hgdaef
 

Link to comment
Share on other sites

5 hours ago, Cassie said:

We can't help you debug by looking at screenshots - could you put together a minimal demo?

Also, I wasn't suggesting copying the markup word for word - I was just pointing out that they're using masks. 

@Cassie Sorry for that i have set demo here in codepen just look in to this 

See the Pen RwVMdpZ by JDabhi (@JDabhi) on CodePen


Please need your point of view on this.

Link to comment
Share on other sites

Thanks for putting that together. 

It looks like you have the right idea! Mask the sections, position them on top of each other and then animate their x/y values

See the Pen rNmdELE?editors=1011 by GreenSock (@GreenSock) on CodePen



You were targeting some elements that didn't exist and using an older version of GSAP syntax, but aside from that there's nothing more technically  that we can help you with here. As someone who's done glitchy animations before, it's fiddly work! 

Aesthetically it doesn't look right yet, but you're on the right track. What's left to do is to tweak the values, adjust the size of the masks and adjust the easing/timing of the animation until it looks right, you're nearly there!

  • Like 3
Link to comment
Share on other sites

15 hours ago, Cassie said:

Thanks for putting that together. 

It looks like you have the right idea! Mask the sections, position them on top of each other and then animate their x/y values
 

 


You were targeting some elements that didn't exist and using an older version of GSAP syntax, but aside from that there's nothing more technically  that we can help you with here. As someone who's done glitchy animations before, it's fiddly work! 

Aesthetically it doesn't look right yet, but you're on the right track. What's left to do is to tweak the values, adjust the size of the masks and adjust the easing/timing of the animation until it looks right, you're nearly there!

 

 

Okay thanks @Cassie For your good information. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...