Jump to content
GreenSock

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

Repeating a speedline effect

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

Share this post


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

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites

Many thanks @PointC

 

I forked an old codepen, So that is why I think there is an old version of Gsap

 

regards

 

bromel

  • Like 1

Share this post


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

Share this post


Link to post
Share on other sites

Hey @bromel,

 

You could use a condition and count onCompletes ...

 

See the Pen YzKjEOR by mikeK (@mikeK) on CodePen

 

Happy counting ...

Mikel

  • Like 4

Share this post


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

Share this post


Link to post
Share on other sites

@PointC & @mikel

 

Many thanks for this, I never knew you could do all this cool stuff :)

 

Bromel

  • Like 2

Share this post


Link to post
Share on other sites
2 hours ago, chrisgannon said:

Here's a fully random version in GSAP 3.0 using the new eachwrap and repeatRefresh:

So much prettier code 😍

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×