Changing text animation

[meervdnick]

Hi Guys,

 

I am struggling to find an answer for my question, so i decided to try my luck over here.  What is am trying to accomplish is the following. I would like to display a changing word  loop on the front page of my website.  So for example, you see the word "developer"  after a few sec "designer" etc, you get the picture.  I dont want to appear the words like that, but that that animate in like in this website's example https://revolvestudio.co/. I've tried to look at the Splittext plugin to create the animation but i just can't  figure it out. I would higly appreciate if there is someone who can help me accomplish this.

 

Thanks a million!!

[ZachSaucier]

Hey meervdnick and welcome to the GreenSock forums!

 

This sort of effect is quite simple to make. Simply have a list of words inside of a container and make sure that container has overflow:hidden; Then animate the words in and out of that container. Here's a demo from another recent thread that does this basic behavior:

See the Pen RKPdEV by marklc44 (@marklc44) on CodePen

 

To stagger the letters, I recommend using GSAP's SplitText as you commented. Modifying the above demo to also use GSAP 3 and SplitText you could do something like this:

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

[meervdnick]

Wow thank you so much for the quick respons!!

[ZachSaucier]

To get rid of the stutter when it loops you could do something like this 

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

[meervdnick]

Can I make the text animate out the same way as it animates in? Can i do that by adding a reverse to it?

[ZachSaucier]

5 minutes ago, meervdnick said:

Can I make the text animate out the same way as it animates in? Can i do that by adding a reverse to it?

It depends what you mean. By "the same way as it animates in" do you mean go down then the next one comes up afterwards? If yes, you could use a reverse, yes. But it'd probably be easier to change the structure a bit and do something like this instead:

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

 

If I'm misunderstanding what you're wanting please let me know  

[meervdnick]

Thanks! What is actually mean is that the "outro" animation is also animated character by character. So same way as it comes in from the bottom,  the same way it animate out to the top:)

[ZachSaucier]

It'd probably be best to make a new tween to do that: 

See the Pen LYERdrv by GreenSock (@GreenSock) on CodePen

[meervdnick]

Your are the best!  Thank you so much!!

[ZachSaucier]

Getting rid of the jump on repeat:

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

[terroarr]

@ZachSaucier How would I make the text go in the opposite direction instead? So falling down instead of up, but keep the first letter coming in first?

[akapowl]

 

Hello @terroarr

 

When you remove the overflow: hidden on the container you can see the full setup and compare what is going on 'behind the scenes' to the code you see. In Zach's latest codepen the elements are naturally stacked on top of each other, so you will first want to somehow invert the order. You could do that by adding an initial gsap.set in the forEach function that loops over the elements, something like this:

 

vsOpts.slides.forEach(function(slide, i) {
  
  gsap.set(slide, { y: i * -2 * vsOpts.lineHeight })
  
  ...
  
})

 

Now you will have them stacked the other way towards the top, and since you want to tween the other way around (from top to bottom instead of from bottom to top) now all you'd need to do would be to invert the values for the y properties in the tweens from negative to positive and vice versa.

 

So...

 

// ...this...
y: i * -1 * vsOpts.lineHeight

// ...would have to be this...
y: i * 1 * vsOpts.lineHeight



// ...this...
y: 50

// ...would have to be this...
y: -50



// ...and this...
y: -50

// ...would have to be this...
y: 50

 

Give it a shot yourself and if you get stuck, post back with a minimal demo of what doesn't work for you, and we'll be happy to help some more.

 

[terroarr]

Hi @akapowl,

Thanks for replying to me. Your solution worked! thank you.

 

Wondering if you can help me reset the timeline on screen resize? I need to use vw for the font size, so I'm trying to grab the new height of the text when the screen resizes and then pass that through the function, but it doesn't seem to be working. Any ideas?

 

See the Pen NWMBJRb by mattmcgilton (@mattmcgilton) on CodePen

 

I'm not sure how to add a codepen into a comment.. 

 

[GreenSock]

There are a few problems: 

1. You are recreating everything over and over again on resize. So you'll end up with a bunch of competing infinitely-repeating animations. You should always kill() or revert() the old one (revert() is new in 3.11). 
2. You aren't accounting for the current progress. So let's say the current animation is halfway through when you resize and it creates a whole new one - since you're using regular from()/to() tweens, it uses the CURRENT value as the end/start. See the problem?  

Here's a fork showing a solution (assuming I understood your goal correctly): 

See the Pen XWqBGQG?editors=1010 by GreenSock (@GreenSock) on CodePen

[terroarr]

@GreenSock Noted, thanks for your help, this is what I was after