Jump to content


how to move text

Moderator Tag
Go to solution Solved by OSUblake,

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

Trying to build the animation where in for every anniversary the image animates, and name list should show 1 by 1, and as the enxt name comes, the previous name should drop down. and when the complete cycle completes, the animation should display the image on the left, and names on the right.


I have got the animation, and text showing up.


Need help on how to proceed by displaying all the names one by one.


also, if i can read a file with the names that would be great. to start with display names one by one and as the next name is read, the first name should move 1 row down and similar for the 3rd name and so on.i have attached an image which i expect should be looking as.


See the Pen gPBjMa by newlearner (@newlearner) on CodePen

Link to comment
Share on other sites

Hey newlearner,


How does the pen you linked differ from the results that you want to have? I'm not understanding where your issue.


My understanding of what you want is more time between each list item so that it can be read. If that's the case, you can change the last parameter, the delay, in your .staggerFrom in line 14. 


As for reading the names from a file, you'd have to provide the file (or at least format) for us to help directly. You could do it on the server side or with JavaScript, just keep in mind that the file would have to be hosted on the server as well.

  • Like 1
Link to comment
Share on other sites

Just to add my to cents,


Like ZachSaucier, I to do not understand the issue your dealing with


Just an observation though. You should try and animate the x (translateX) property instead if the left css property in your to() tweens. Anytime you animate a css position offset like left, top, bottom, and right.. your elements will only animate on a pixel level and use the CPU, which can cause your animations to be less smooth, have jitter, jank and cause layout changes in the DOM.


You will always get smoother results when animating x (translateX) and y (translateY) instead. Since CSS transforms will animate on a sub-pixel level and use the GPU (hardware acceleration) which will give you a smooth motion and better performance.


CSS position offsets are only good for setting the initial position of your elements. Then when you animate them, you animate with CSS transforms.


Here are two articles that explain it further


This one by GreenSocks's Jack:




and this one:





  • Like 1
Link to comment
Share on other sites

I think newlearner wants the added name to be prepended. If so, this might help you out.


See the Pen a36a207d70d509e3be8c45f710940681 by osublake (@osublake) on CodePen


The names array could be in another file. The function I made returns a timeline, so you could add it your other timeline. I didn't feel watching the other animations so I just commented your timeline out.

  • Like 4
Link to comment
Share on other sites

  • 2 weeks later...

thanks OSUblake. 


another question, if i want to play a video in between the tween, is that possible?

Link to comment
Share on other sites

Sure. But where exactly are you talking about? Before the names tween in, after each individual name, etc?

Link to comment
Share on other sites

at the end of the tween. after the names are displayed. Is there a method in tweenMax or any other i can use and pass the url.

Link to comment
Share on other sites

  • Solution

GSAP doesn't really have an interface to control videos per se. But lets say you have a video file that you can start by calling play on it. So put that in that function.

function playVideo() {

If you're not going to animate anything else on that timeline when you want to play the video, you can simply reference your video function in the timeline's onComplete callback.

var myTimeline = new TimelineMax({ onComplete: playVideo });

If you have some animations on your timeline that need to play after the video has ended, you could add a pause, and then continue playing the timeline when your video has ended.


Here's an example of how that could work. After the names tween in, there is going to be a pause of 2 seconds to simulate a video playing. After that, the timeline starts playing again where it fades that medallion thing away.

See the Pen 42a520104e8e3285512bd5c58c782405?editors=0010 by osublake (@osublake) on CodePen

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.