Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
timdt

fade in out same position

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!

 

 

greensock.jpg

Link to post
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 post
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 post
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.

×