Jump to content
Search Community

SteppedEase - Hold & Step

SimplSam test
Moderator Tag

Go to solution Solved by mikel,

Recommended Posts

I am trying animate a SVG element where the element's position/pose is held for a duration and then snaps immediately to a new position/pose, and so on and so on.

 

I have a working example using SteppedEase, but it feels a bit hacky - as it requires me to use an undocumented 'true' parameter (mentioned in: https://greensock.com/forums/topic/13388-steppedease-to-step-immediately) and duplicate the relevant SVG element's path data from the inline SVG image - with a slight modification (otherwise the duplicated path seems to be ignored).

 

In the codepen example - the Red square should snap to align with the Green triangle as it passes the little blue squares (at 0s, 1s and 2s).

 

When I tried using just steps(1) - it stepped once, but at 50% of the inter-blue-square duration (1s in this example). Whereas I need it to step once at 100% of that duration. So the overall behaviour would be more akin to using a series of Hold durations.

See the Pen YzWogKP by SimplSam (@SimplSam) on CodePen

Link to comment
Share on other sites

Excellent (once again). Looks like I just had to get out of my tunnel thinking, essentially swapping out: Steps with n Duration & zero Delay, for: Tweens with n Delay & zero Duration.

 

And I guess - when I stop and think about it... a 'Hold duration' is a 'Delay'! 😄

 

 duration: 0, delay: 1

 

Regarding "Normal Transforms" - This was a simplified explanatory example. Back in the real world, the transitions will be various state changes - which could be Transforms, Styling or Deformations of SVG data elements, with more complex timelines and various interpolation combinations.

My updated version ...

See the Pen oNLrKRd by SimplSam (@SimplSam) on CodePen

 

Thanks again.

  • Like 1
Link to comment
Share on other sites

Hey Sam. If I were tasked with this sort of thing I might try using the onUpdate of the triangle's animation to update the position of the square when necessary. But the approach that you now have works as well, though I recommend using .set() instead of .to() if you have a duration of 0. I also recommend using the position parameter instead of delay. 

 

P.S. When making new versions of your demos for these forums can you please try to remember to use the "fork" button? That way context is not lost when you update your code.

Link to comment
Share on other sites

Hi Zach. There is no relation between the triangle and the square per se. The triangle is just there, for this example, as a visual timeline playhead position indicator.

 

I will update to code to use Set (as it makes sense).

With regards to Position. I would happily use it, as again - it would make sense, but I don't think I can as I am using keyframes, and I canny find anywhere to place the 'position' parameter for each sub-tween. i.e. Where would the 2 keyframed sub-tween's position parameters go in the below example snippet?

 

tl.set('#FL0S1_sqr', {keyframes: [
  {x: '563', y: '0', duration: 0, delay: 1},     
  {x: '1126', y: '0', duration: 0, delay: 1}, 
]}, 0);


Also... I definitely forked my original pen. I have double checked and can see it listed as such on the details page.

Cheers

Link to comment
Share on other sites

22 minutes ago, SimplSam said:

I am using keyframes, and I canny find anywhere to place the 'position' parameter for each sub-tween.

Ah, I didn't notice. If you're using keyframes then you're correct to use delay.

 

23 minutes ago, SimplSam said:

I definitely forked my original pen. I have double checked and can see it listed as such on the details page.

You're also correct here. I apologize for my hastiness :) 

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