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

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.

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

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

[How to pin siblings of a pinned container]

Quote

Hi. Thank you for reply. But, it's not that I'm trying to implement. I want gray and yellow containers to be ablosutely close to green container all the time.

 

[Does gsap have classic ease functions?]

Yeah, thank you guys. I think pow1 is what I was looking for.

[How to pin siblings of a pinned container]

Is there a way to pin a pinned container siblings to the pinned container?

 

In the codepan I have the green sticky container inside it's spacer. I've made the spacer beacouse I want some distance ,while scrolling that, I can see the sticky block longer, and do some animations. But the sticky block spacer siblings will be pushed out of viewport when the sticky block is smaller in height then viewport. So I want to make the siblings to be sticky to the sticky container. Is it possible? I've  success in resolving the issue in vanilla js, but with blinking issues on iOS 14.

 

Codepan

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

[Does gsap have classic ease functions?]

Hello, вoes gsap have classic ease functions, Like linear ease-in / ease-in-out?