Can someone help me to get this slider animation right?

[Nestor Navas]

I want as slider or carousel with 4 words in it to be animated sliding up displaying 1 at a time for 1 second  in an infinite loop. Not sure if this is the right approach but I'm trying to animate the slider to move up and show 1 word at a time and separately I'm trying to animate each word so that they come from opacity 0 to opacity 1 let them be with opacity 1 for 1 second and  while they are being displayed and then back to opacity 0 again when they slide up to give way to the next one.   Can someone help me out to get the animation right? 

At the moment the slider is not stoping to show 1 at a time and the words are not changing their opacity indiviadually either

Here's the codepen of it.

See the Pen wBwKpyP by Nestor-Navas (@Nestor-Navas) on CodePen.

[mvaneijgen]

Hi @Nestor Navas welcome to the forum!

 

Check out this tutorial by our own @Carl it walks you through the whole process and the logic behind it. Hope it helps and happy tweening! 

 

 

[Nestor Navas]

Thank you very much that tutorial was really helpful