Jump to content
Search Community

different durations and delays for a single line of fromTo yoyo repeat repatDelay

Jimmi Heiserman 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

I love the extreme chaining and custom animations you can make in just a single line of code. I was wondering if a repeating animation can be done like so:

 

object starts invisible, alpha:0

 

immediately begin to fade in over 1 second

wait and stay visible for 2 seconds

fade out over 3 seconds

wait 4 seconds for the animation to repeat

 

I used durations of 1, 2, 3, and 4 to make it easy to show that I want each leg of the animation to have its own duration and delays.

 

I imagine something like this below, but I might not even be close, or this might not be possible in a single chained command?

tl.set(object, {autoAlpha:0}).fromTo(object, 1, {autoAlpha:0}, {autoAlpha:1, duration:2, repeat:-1, yoyo:true, repeatDelay:2}).delay(4);

 

 

Link to comment
Share on other sites

I think I may have answered my own question.

 

new TimelineMax().set(object, {autoAlpha:0}).to(object, 1, {autoAlpha:1}).to(object, 3, {autoAlpha:0, delay:2}).repeatDelay(4).repeat(-1);

 

This appears to work in my example, hitting all those durations and delays of 1, 2, 3, and 4. Do others agree this is correct or can I fix it or optimize it further with just fromTo or something?

  • Like 1
Link to comment
Share on other sites

Hi @Jimmi Heiserman

 

There are many ways to skin a cat! Using a single, chained statement ... you could execute delays by either using the position parameter, the delay property,  or by tweening to an already set value for the duration = to the desired delay. Here is a CodePen illustrating. Hope it helps!

 

See the Pen PyNqQY by sgorneau (@sgorneau) on CodePen

 

  • Like 2
Link to comment
Share on other sites

10 minutes ago, Jimmi Heiserman said:

I think I may have answered my own question.

 


new TimelineMax().set(object, {autoAlpha:0}).to(object, 1, {autoAlpha:1}).to(object, 3, {autoAlpha:0, delay:2}).repeatDelay(4).repeat(-1);

 

This appears to work in my example, hitting all those durations and delays of 1, 2, 3, and 4. Do others agree this is correct or can I fix it or optimize it further with just fromTo or something?

 

Will absolutely do it!

 

And I see you meant "truly" one line! I thought you meant one chained event :)

 

I included a yoyo only because I caught a glimpse of it in your original code. With or without, you certainly answered your own question! Nicely done!

 

Here is a pen using your method

 

 

See the Pen LgNVKa by sgorneau (@sgorneau) on CodePen

 

  • Like 4
Link to comment
Share on other sites

Thanks for showing the other way to do it too with pseudo delays and using a non-change animation as a wait timer. I cleaned up your codepen.io in a fork. I figured since we aren't actually tweening anything for those last 2 seconds, I made both the target and the vars an empty object. That's just preference though. But I did consider the yoyo:true you added to be a bug because not only do we not need it, it causes a flicker/overwrite around the second or third repeat because we don't really want to bounce backwards because we used two "to"s.

 

See the Pen Wawvqp by jimmi_heiserman (@jimmi_heiserman) on CodePen

 

But again, thanks for that codepen. Seeing how others do something expands our knowledge on this. Tweening is like a chess game, with some many ways to win, and you get better by seeing others moves and strategy you may have missed.

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