fromTo, ot set + to work not as expected inside gsap.context

[TechnoTramp]

Hi, I encountered a strange bug where using fromTo or set followed by to inside gsap.context prevents the animation from working.

It always sets the final value instead. Just found, it's related only to css vars.

fromTo inside context issue

 

See the Pen KKEmemz by iodzqkcj-the-styleful (@iodzqkcj-the-styleful) on CodePen

[mvaneijgen]

I see there are a few things wrong in your demo. 

• You are using GSAP version 3.4.0 we're on version 3.12.5!
• You should not animate your trigger element!
• You are better of not animating properties like top, bottom, left, right. Use the transform properties x and y
• Your ScrollTrigger was already done on page load 
• Why would you .add() add tween to a timeline and not just create the tween directly on the timeline?
• You almost never need a .fromTo() tween, you can do just a .from() or .to() and GSAP will just animate to the default/initial values
• There is no duration: 1, property in a timeline. You can however create a defaults: {} object and add duration to there then all tweens on the timeline will have use that duration. (side note: doesn't really matter when you use a ScrollTrigger with just one tween)

If I fix some of these mistakes everything works as expected or am I missing something? Hope it helps and happy tweening! 

 

See the Pen GReEpGj?editors=0110 by mvaneijgen (@mvaneijgen) on CodePen

[TechnoTramp]

20 hours ago, mvaneijgen said:

I see there are a few things wrong in your demo. 

• You are using GSAP version 3.4.0 we're on version 3.12.5!
• You should not animate your trigger element!
• You are better of not animating properties like top, bottom, left, right. Use the transform properties x and y
• Your ScrollTrigger was already done on page load 
• Why would you .add() add tween to a timeline and not just create the tween directly on the timeline?
• You almost never need a .fromTo() tween, you can do just a .from() or .to() and GSAP will just animate to the default/initial values
• There is no duration: 1, property in a timeline. You can however create a defaults: {} object and add duration to there then all tweens on the timeline will have use that duration. (side note: doesn't really matter when you use a ScrollTrigger with just one tween)

If I fix some of these mistakes everything works as expected or am I missing something? Hope it helps and happy tweening! 

 

 

 

Thatk you so much for all your remarks. That's complete solution and even more.