Jump to content


Creating A Loop Of Animated Text

Go to solution Solved by Dipscom,

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


I would like to create an animation where the text slide ups vertically to be replaced with some coming in from below. I would like this to happen on a loop.


Here is a codepen for where i've got to so far, before getting stuck 


The problems I have are:


i) The last tween on the timeline seems to be setting the first text div lower in its container prior to the animation starting (you may need to refresh the page to see this properly).  When the animation starts this does correct itself, but I need to find out how to prevent this.


ii) I can't work out how to loop the animation properly.  I currently have it repeating with the {repeat-1} property set on the main timeline, but this isn't a true constant loop. I can't work out how to have it so the text on screen always moves up when leaving and always comes in from the bottom when arriving (this is proving particularly problematic at the end of the animation).


Any help would be really appreciated.


Many thanks,



See the Pen qRENKR by emilychews (@emilychews) on CodePen

Link to comment
Share on other sites

Hi Emily :)


Welcome to the GreenSock forums.


If I'm understanding your question correctly, I think the new ModifiersPlugin could be just what you need for your seamless loop. Please have a look at the docs and some samples here:




Hopefully that helps a bit.


Happy tweening and welcome aboard.


  • Like 5
Link to comment
Share on other sites

  • Solution

Hello emilychews,


As Graig said: Welcome to the forums. Thank you for the CodePen, helps a lot to see your issues.


I had a stab at your problem and saw that the solution is actually related to the fact you're using .fromTo() methods on all your tweens. They are useful but you have to know how they behave. Have a look at this video by Carl, it will explain you some important details:



As for a solution, the bellow code is an amended version of yours. It took the liberty to change you y into yPercent and opacity into autoAlpha for more flexibility and control. In the docs, you will find detailed explanation (and loads more info) about those.


.fromTo('.sliderbar', 3, {scaleX: 0}, {scaleX: 1})    //red slider bar underneath text

.to('.slidetext1', .7, {yPercent: -50, autoAlpha:0})
.from('.slidetext2', .7, {yPercent: 50, autoAlpha:0})

.fromTo('.sliderbar', 3, {scaleX: 0}, {scaleX: 1})   //red slider bar underneath text

.to('.slidetext2', .7, {yPercent: -50, autoAlpha:0})
// Make the first text jump to the start point
.set('.slidetext1', {yPercent:50})
.to('.slidetext1', .7, {yPercent: 0, autoAlpha:1});
  • Like 4
Link to comment
Share on other sites

Thank you so much Carl and Dipscom.  I'll play around with this later, but both seem to be great resources /  solutions!  

I feel it was very deserving to have pushed Dipscom over the 1000 likes :)



  • Like 1
Link to comment
Share on other sites


Edited by Dipscom
wans't big and bright enough
  • 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.