Search the Community
Showing results for tags 'stepped ease'.
Found 3 results
-
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.
-
Hi There, I am not quite sure why the following code which simply repeats a timeline that plays a animated sprite twice works fine: TL = new TimelineMax({repeat:1}); TL.stop(); TL.set([spriteSheet], {x:0}); TL.play(); TL.addLabel("f1", "0") TL.to(spriteContainer, .1, {autoAlpha:1, ease:Sine.easeInOut}, "f1+=0"); TL.to(spriteSheet, 1.5, {x:-(spriteWidth * spriteCopyFrame),ease:SteppedEase.config(spriteCopyFrame)}); but if I add another tween after the sprite stepped ease animation, the sprite is not reanimated on the repeat but the new tween is animated twice as per the repeat:1 TL = new TimelineMax({repeat:1}); TL.stop(); TL.set([spriteSheet], {x:0}); TL.play(); TL.addLabel("f1", "0") TL.to(spriteContainer, .1, {autoAlpha:1, ease:Sine.easeInOut}, "f1+=0"); TL.to(spriteSheet, 1.5, {x:-(spriteWidth * spriteCopyFrame),ease:SteppedEase.config(spriteCopyFrame)}); TL.to(beam, .5, {autoAlpha:.8, y:80, x:-35, scaleX:.35, scaleY:.35, ease:Sine.easeOut}, "f1+=1.9"); Ive tried resetting the the sprites x position with different methods but still it will not replay and seems to always hold on the first frame. Any help appreciated as Ive spent a few hours trying different solutions without success
-
Hi all, I followed the stepped ease examples from other topics but can't get this to work. I created a sprite that contains the word "golden" which is being filled with smoke mimicking a masked animation. Each image in the sprite is 160px wide. The entire sprite is 4960px wide. I then divided the width of the sprite by the width of the div (160px) and used that as the stepped configuration. The word however doesn't appear correctly.
