EP9

Ahh right so I tried previously (with labels) and the issue was – if I add any frames after #text frame (1 or 20 frames) then the whole timeline and order of everything after would be off. Please see this pen where I have used labels and added another frame after #text – in a div called #three. This frame now takes 15 seconds to come in – instead of +1 from #text frame. Thanks again for all your help – am trying to figure this all out. https://codepen.io/EP9/pen/xxGmdRQ

Ok I have "hopefully" done that on the CodePen below – thanks for your help with this. https://codepen.io/EP9/pen/VwLqpYy This circle starts scaling deep into a longer animation – I am using and constantly changing offset parameters "+=1" before and after the scale is played/called so don't want to use absolute time units (start from 0, play this at 10 seconds) for anything if possible.

I will get a CodePen up if possible – need to extract this from a lot of code unfortunately. Does this make any more sense? // circle fades in from 0 alpha tl.to(circle, 0.8, { alpha: 1.0, ease: Sine.easeInOut }, "-=0"); // circle scales down to scale 1 over 15 seconds tl.to(circle, 15, { scale: 1, ease: Sine.easeInOut } "-=0"); // image comes in and covers the whole frame (without waiting 15 seconds) tl.to(image, 1.6, { alpha: 1.0, ease: Expo.easeInOut }, "-=1"); // Rest of timeline without having to rewrite above as this tl.to(image, 1.6, { alpha: 1.0, ease: Expo.easeInOut }, "-=15"); // << Without increasing offset here

Am trying to scale up a circle really slowly – used a time of 15s and from a scale of 1 to 4. I want the next part of the animation, some text to come in as normal and the circle fade out (while still doing the very slow scale animation) Unfortunately I can't get this to work without the scale taking 15 seconds and then the text coming in. The only workaround is by starting the scale outside of the normal timeline (using time of 0 without quotes) and then trying to line them up. I know I am doing this wrong, but can't figure it out – thanks.

Ahh that makes sense too – thank you. Is it best/standard to store other animations to functions + variables using TweenMax or to just create another separate timeline instance? I assume that will depend on the animation though, TweenMax for simple animations (like my quick scale) and TimeLineMax for another complicated timeline etc?

Yep, that's got it... amazing! What I'm still curious about is, why the variable method does not work, as we are just assigning this to another function now instead? Thank you so much for your help – just trying to figure out why this doesn't work in my original code too. EDIT: By changing the code to the following this now works (using TweenMax) instead of referencing my tl.to timeline var scaler = TweenMax.to(box1, 0.2, { scale: 2, ease: Sine.easeInOut, paused: true });

Thanks for the welcome and bearing with my question. I will try and explain more: - I have a 15 second banner animation and on the left hand side is a "separate" small area I want to animate on hover - On hover of the area I want to scale it using the values in "scaler" variable - On mouse out I want it to played in reverse (scale back to normal) without duplicating another var with reverse values - I want to keep this all in GreenSock and JS (no CSS) as the scaler variable will be used in other places I can get this to work by creating a new instance of TimeLineMax as a separate animation/timeline, but I am wondering why this approach does not work and why the animation triggers instantly when assigned to a variable? I can get the animation to not fire by changing "scaler" to: var scaler = tl.to(box1, 0.2, { scale: 2, ease: Sine.easeInOut, paused: true }); But nothing else works (no mouse in/out) Thanks,

I am trying to store a smaller animation in a variable called "scaler." There is a 15 second banner animation happening around this, but scaler always fires immediately. How can I store small animations in variables, so i can call play() and reverse() on them during a running timeline? I can get it working by defining two separate animations, but this involves doubling the code, rather than just using play/reverse. Thanks, tl = new TimelineMax({ paused: false, delay: 0.2, repeat: 0 }); // other longer animation happening here var scaler = tl.to(box1, 0.2, { scale: 2, ease: Sine.easeInOut}); main.addEventListener("mouseover", function() { scaler.play(); console.log('scale up'); }); main.addEventListener("mouseout", function() { scaler.reverse(); console.log('scale down'); });