Jump to content


fade in out same position

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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!




Link to comment
Share on other sites

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


  • Like 4
Link to comment
Share on other sites

@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.

  • Like 3
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.