Jump to content
Search Community

Adjustable animation timings

mjwlist 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,

 

I am looking for advice on a logical way to make animation timings adjustable. 

In the attached pen I have a simple animation working more or less how I need it to. Some dots move sequentially along a line and pulse in turn once they hit a certain marked point. The pen makes it obvious. Ultimately I'll need to add a finger pushing a button in time with the dot pulse. 

 

So I have the animation kind of working but it's just by the skin of my teeth. If I adjust a parameter for example the length of the sequence or the staggerTo delay I throw everything out of sync. I am hoping for some help with how I would make this work i such a way that I can speed up and slow down the rate of  of the pulse whilst keeping everything in sync. I think conceptually this could help with many other things in the future.

See the Pen bjqGrE by mjwlist (@mjwlist) on CodePen

Many Thanks

 

Mark

See the Pen bjqGrE by mjwlist (@mjwlist) on CodePen

Link to comment
Share on other sites

Hi @mjwlist :)

 

I'm not sure I follow the question. Do you want that entire animation to increase/decrease speed? Or did you mean that you wanted to slow the dots horizontal animation, but still have them pulse at the trigger? Most anything is possible. I'm just not clear on the desired outcome here.

 

Thanks and happy tweening.

 

  • Like 2
Link to comment
Share on other sites

Hi @pointC,

 

thanks for for the reply. The question is how to adjust the timings so I can speed up the horizontal dots but still pulse at the line. 

 

As as you can see I have it working as is but it’s very delicate. If I adjust the timing of the horizontal dots they fall out of sync with themselves and no longer track the line evenly spaced.  The pulse is probably easier to adjust the timing without causing a problem. 

 

Its really advice  on a more logical way of doing this to have some level of control of the speed and coordination of elements. 

 

Please let let me know if I’m still not making myself clear. 

 

Thanks again

 

Mark

Link to comment
Share on other sites

You can create a master timeline and add your child timelines at same position using position parameter. Now if you speed up master timeline both animations will stay in sync.

 

https://css-tricks.com/writing-smarter-animation-code/

 

If you plan to move that bar that "triggers" the pulse then you will have to perform a hit test to trigger pulse. Easiest way would be to compare x translate.

  • Like 4
Link to comment
Share on other sites

@pointC, @Sahil,

 

Thanks to you both. 

 

Ok so I've got the idea of a master timeline and triggering tidy functions from the excellent css tricks article.

 

This is where I was at just before @pointC kindly did it for me again!.....

// RED DOTS TO RIGHT
function dotMove() {
  var dot = document.getElementsByClassName("animation-inner-dot");
  var tl = new TimelineMax();
  tl.staggerTo(dot, 3.5, {x: 422, repeat: -1, ease:Linear.easeNone}, 0.7);

  return tl;
}

// BLINKING RED DOTS
function dotPulse() {
  var pulse = document.getElementsByClassName("animation-pulse-dot");
  var tl = new TimelineMax();
  tl .staggerTo(pulse, 3.5, {opacity:0, repeat: -1, scale: 4, delay: 1.95, ease:Power4.easeOut }, 0.7);

  return tl;
}

var master = new TimelineMax();
master.add( dotMove().timeScale(0.5) );
master.add ( dotPulse().timeScale(0.5), 0 );

 

Now from looking at @pointC's  pen I could theoretically speed up or slow down an entire animation sequence with something like the following...Basically adjusting the timescale in one place on the master.

 

var master = new TimelineMax().timeScale(0.5);
master.add( dotMove );
master.add ( dotPulse(),  0 );
master.add ( somethingElse(),  0 );
master.add ( anotherThing(),  0 );

 

I think I'm starting to picture how things might fit together in nested timelines as complexity builds.

 

One thing I'm not sure of is in this code from @pointC.... In the "animation-pulse-dot" tween at the end there is the 0.7 stagger delay but what is the 1.95 value doing?

console.clear();  
var tl = new TimelineMax().timeScale(0.5);
tl.staggerTo(".animation-inner-dot", 3.5, {x: 422, repeat:-1, ease:Linear.easeNone}, 0.7)
tl.staggerTo(".animation-pulse-dot", 3.5, {opacity:0, scale: 4, repeat:-1, ease:Power4.easeOut }, 0.7, 1.95);

 

And just one last question about the forum in general. What is considered best to do with example pens.  How long should they be left in the post so others can see the example relating to the initial question. Really I'm asking at what point is it reasonable to delete example pens form my codepen or should they be left accessible indefinitely. 

 

EDIT: I realise what the 1.95 value is. Alternative place to put the start delay....

 

Many thanks again

 

Mark

 

 

 

Edited by mjwlist
  • Like 2
Link to comment
Share on other sites

Yep - the 1.95 is the position parameter. 

https://greensock.com/position-parameter

 

It's a very powerful feature and I'd recommend it over adding delays to tweens on timelines.

 

I think it's a good practice to leave pens accessible so future readers can see the thread evolve from initial problem to solution. If you'll be making changes as the thread progresses, I'd also recommend forking your original pen and labeling it as version 2 etc. It makes it so much easier for others to jump in and future readers to follow along.

 

Let us know if you have more questions. Happy tweening.

:)

 

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