Jump to content
Search Community

Repeating a speedline effect

bromel test
Moderator Tag

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

Hi all

I am trying to create a speedline effect similar to this:

See the Pen EjVyXN by chrisgannon (@chrisgannon) on CodePen

As you can see the effect in this demo is quite seamless and I am trying to create the same effect. My setup is rather different due to the nature of how I am animating things in my project. I am slightly stuck in trying to repeat my animation in the same way. 

Any tips or insights on how to do this would be greatly appreciated.

 

many thanks

See the Pen pozKxoQ?editors=1010 by w9914420 (@w9914420) on CodePen

Link to comment
Share on other sites

I'd probably do something like this:

 

See the Pen XWrYwQK by PointC (@PointC) on CodePen

 

I just used the loop index to make a little delay. You could also use a function to randomly generate one. Or manually create an array of delays if you want detailed control. That's what I did in this demo.

 

See the Pen yPbYRY by PointC (@PointC) on CodePen

 

Hopefully that helps. Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

@PointC Absolutely fantastic ?

 

I applied your solution to what I already have so it looks like this:

See the Pen ExYRqap by w9914420 (@w9914420) on CodePen

 

Just out of curiosity, my understanding of the code and repeat property is that it will repeat the instantiated values on the first call, is it then possible that on every repeat cycle we can call different delay and repeatDelay values when the timeline repeats itself?

 

Many thanks

 

Bromel

Link to comment
Share on other sites

If you want a different delay or repeatDelay each time, I think I'd skip the repeat altogether. You can use an onComplete callback and then a delayedCall to restart the timeline. Here's another fork with that possibility.

 

See the Pen eYOjBEq by PointC (@PointC) on CodePen

 

Hopefully that helps a bit. Happy tweening.

:)

 

PS Just a FYI — your pen is using gsap 1.16.1 which is over 4 years old. The latest is 2.1.3.

 

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Hi @PointC

 

My very last question on this matter  - since we are now using a method to restart our timeline and by using the oncomplete call we can infinitely repeat our timeline, therefore is it possible to have a method of stating the number of restarts. I ask because in the project that I am working on we do not want to have this effect running in the back lets say after 7 secs or in our case after 7 repeats, we want our performance to be as efficient as possible and therefore want to stop the tween after this period.

 

Many thanks again

 

Bromel 

Link to comment
Share on other sites

You could set a global counter like @mikel did. You could set a count limit on each timeline. You could also use a dummy tween as a timer and check its progress to see if you want to restart the speedline timelines. As with all things GSAP and JS, there are a bunch of ways to make it happen. Here's the dummy tween timer solution.

See the Pen gOYjXKy by PointC (@PointC) on CodePen

 

Hopefully that helps. Happy tweening.

:)

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

  • 1 month later...

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.
×
×
  • Create New...