Timeline offset and absolute

[EP9]

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.

Edited March 27, 2020 by EP9
Scale up edit to match code pen example

[PointC]

Do you have a demo?

 

[ZachSaucier]

It sounds like you need to use the position parameter. For more detailed help, make a minimal demo like Craig suggested  

[EP9]

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

 

[ZachSaucier]

Your code doesn't mention any text...

 

Are you wanting something like this? This assumes all of them have an autoAlpha other than 1 to start.

tl.to(circle, 0.8, { alpha: 1.0, ease: Sine.easeInOut }, 0); // circle fade in
tl.to(circle, 15, { scale: 1, ease: Sine.easeInOut }, 0); // scale down
tl.to(image, 1.6, { alpha: 1.0, ease: Expo.easeInOut }, "-=1"); // image fade in
tl.to(text, 1.6, { alpha: 1.0, ease: Expo.easeInOut }, 2); // text fade in

 

I think you'd enjoy using GSAP 3. Then you can make use of defaults, the more condensed ease form, a sleeker API, and a bunch of other benefits. The above could be written like so in GSAP 3:

var tl = gsap.timeline({defaults: {ease: "sine.inOut", duration: 1.6});
tl.to(circle, { duration: 0.8, alpha: 1.0 }, 0); // circle fade in
tl.to(circle, { duration: 15, scale: 1 }, 0); // scale down
tl.to(image, { alpha: 1.0, ease: "power4.inOut" }, "-=1"); // image fade in
tl.to(text, { alpha: 1.0, ease: "power4.inOut" }, 2); // text fade in

 

[PointC]

23 minutes ago, EP9 said:

I will get a CodePen up if possible – need to extract this from a lot of code unfortunately.

We don't need to see the actual project code and assets. In fact, we'd rather not. Just use a couple divs as proxies for the actual elements and you'll be good to go. Thanks.  

 

[EP9]

57 minutes ago, PointC said:

We don't need to see the actual project code and assets. In fact, we'd rather not. Just use a couple divs as proxies for the actual elements and you'll be good to go. Thanks.  

 

 

Ok I have "hopefully" done that on the CodePen below – thanks for your help with this.

 

See the Pen VwLqpYy by EP9 (@EP9) on CodePen

 

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.

 

[ZachSaucier]

This is a perfect use case for the new "<" position functionality in GSAP 3!  

See the Pen yLNGMPJ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

However you can still do this in GSAP 2. You just have to use a label:

See the Pen MWwZprj?editors=0010 by GreenSock (@GreenSock) on CodePen

[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.

 

See the Pen xxGmdRQ by EP9 (@EP9) on CodePen

[ZachSaucier]

28 minutes ago, EP9 said:

Please see this pen where I have 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.

Again, you should upgrade to GSAP 3. Why not?? 

 

You can't really dynamically do what you're trying to do in GSAP 2 without calculating the values yourself: 

tl.add("#text", 1, { alpha: 1, ease: Sine.easeInOut }, "startTime+=4"); 
tl.to("#three", 2, { alpha: 1, ease: Sine.easeInOut }, "startTime+=" + (tl.recent().duration() + 1));

In GSAP 3 it's super simple: 

tl.to("#text", { duration: 1, alpha: 1 }, "<4"); 
tl.to("#three", { duration: 2, alpha: 1 }, "<1"));