SimplSam Posted November 22, 2020 Share Posted November 22, 2020 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 More sharing options...
Solution mikel Posted November 22, 2020 Solution Share Posted November 22, 2020 Hey @SimplSam, Maybe I am not interpreting your setup and your ideas correctly. But why don't you use 'normal transforms'? See the Pen 5db6e0c6571ee7f554c6dd8876c77d59?editors=1010 by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 3 Link to comment Share on other sites More sharing options...
SimplSam Posted November 22, 2020 Author Share Posted November 22, 2020 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. 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 23, 2020 Share Posted November 23, 2020 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 More sharing options...
SimplSam Posted November 23, 2020 Author Share Posted November 23, 2020 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 More sharing options...
ZachSaucier Posted November 23, 2020 Share Posted November 23, 2020 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now