Search the Community
Showing results for tags 'chain'.
Found 2 results
-
Hi! I am really loving Green Sock! I have an animation working, but I am wondering if there is a way to animate all elements at the same time in the same timeline, if that makes sense? See my codepen (you may want to view on codepen or resize the codepen window to see it clearly). My goal with this is to have each box fade in and transform/translate/scale all towards the center of the section and then to fade out at the same time. But, I am trying to get them to do this all at once and to come from different directions. I tried chaining .from().from()'s, but this just plays one and then starts another. I tried something like: tl .from(".icons-animated #HumanStars", {translateX: -200, translateY: -200, scale: 0.3, rotation: 90, autoAlpha: 0, ease: "power2"}, ".icons-animated #HumanStars strong", {translateX: -200, translateY: -200, scale: 0.3, rotation: 90, autoAlpha: 0, ease: "power2"}); but this doesn't seem to achieve my goal. Is there a way to animate .from() and chain the animations inside that from? Which methods should I be reading about/what is the syntax for this if it exists? Or am I not approaching this the right way? Thank you so much.
-
i was trying to figure out, if possible, how to chain an instance of multiple tweens. For example: var tween1 = TweenMax.to('#image1', 3, {css:{scale:1.5}, ease:Linear.easeNone}); var tween2 = TweenMax.to('#slide1', 3, {css:{opacity:1}, ease:Linear.easeNone}); The above works.. but couldn't i just chain them, like below? var tween1 = TweenMax.to('#image1', 3, {css:{scale:1.5}, ease:Linear.easeNone}) .to('#slide1', 3, {css:{opacity:1}, ease:Linear.easeNone}); But when i try this, the browser throws an error: TypeError: TweenMax.to(...).to is not a function The reason i'm asking is because if i have to pause the animation i have to basically use the below: $('#slider').on("mouseenter",function(){ tween1.pause(); tween2.pause(); }).on("mouseleave",function(){ tween1.resume(); tween2.resume(); }); I have to declare pause and resume twice. If i had multiple tweens in one instance, i could declare pause() and resume() only once. How do i create an instance (reference variable) for multiple tweens? Thanks ahead of time for any help!
