Search the Community
Showing results for tags 'stepped ease'.
-
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 squ
- 5 replies
-
- svg
- stepped ease
- (and 5 more)
-
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 animate
- 7 replies
-
- repeat
- sprite animation
-
(and 1 more)
Tagged with:
-
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.