fade in out same position

[timdt 29 Likes (Newbie)]

Hey guys,

I have been struggling to achieve some ( i guess ) basic gsap stuff.

What i want to achieve is a text that comes in from out of the screen to the center of the screen and then stays there for a couple of seconds and then moves out of the screen again. Now it is time for a new text that comes in from the left goes to the same position and moves out of the screen again.

I tried to achieve this but the problem that i've encountered what that the 3 text items where overlapping eachother at the start.

the other 2 text items need to be invisible when the 1st one moves to the center.

 

step 1 : black screen.

step2: fade in text 1 to the center of a div coming from the left side of the screen

step 3: after a couples of seconds fade out text 1 and disappear.

step 4 : text 2 becomes visable and fades in from the left to the center. 

step 5 : stays there for a couple of seconds --> moves out of screen again

step 6: repeat process.

 

I have also drawn to explain, since english isnt my native language.

Thank you guys, greensock is awesome!

 

 

[Carl 9,066 Likes (Superhero)]

If I understand the correctly, you can use a loop to create the animations for each element and place them in a timeline.

 

Please see the demo below. Update the CSS to suit your specific needs:

 

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

 

[timdt 29 Likes (Newbie)]

@Carl Hey carl, thank you for your fast reply. This really helps me understand. This is exactly what i meant! 

@PointC Thank you for the reference, will take a deep look into it. 

Have almost watched almost all tutorials and i am making slow but steady progress. This really helps me out allot.

 

You guys are awesome ! 

Greeting from the netherlands.