Jump to content
GreenSock

iotron

Scramble text effect cycle array

Go to solution Solved by GreenSock,

Recommended Posts

Hi, I am new to GSAP and animation. I have tried to create this animation to cycle words from an array. But the animation came out to be somewhat stiff cause I am a noob. 😅 How can I make the animation a bit smoother, like make the letters slide down like a casino while scrambling. Also, the word is not revealing letter by letter as was in the scramble text demo. Kindly help. Thank you.

See the Pen oNEYWxz by iotronlab (@iotronlab) on CodePen

Link to comment
Share on other sites

  • Solution

You had the "duration" tucked inside the scrambleText: {...} object, so it defaulted to using a duration of 0.5 yet you also had the revealDelay set to 0.5 (the same), thus by the time it started the reveal, the tween was over. I assume you wanted it to be more like this?: 

 

See the Pen zYRozmR?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 2
Link to comment
Share on other sites

Hi, thanks for the help. Much appreciated. How can we add transition animation to the letters like slide-in-y?

Link to comment
Share on other sites

You'll need SplitText for customised text animations - scrambleText is just for scrambling. ☺️
 

 

  • Like 1
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.
×