Jump to content
GreenSock

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

Creating A Loop Of Animated Text

Recommended Posts

Hi

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,

 

Emily.

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:

 

https://greensock.com/modifiersPlugin

 

Hopefully that helps a bit.

 

Happy tweening and welcome aboard.

:)

  • Like 5
Link to comment
Share on other sites

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 :)

 

Emily

  • Like 1
Link to comment
Share on other sites

IMMA THOUSAND!

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