Gsap Background Change Animation not working

[Aayushi]

Hey, I am a beginner at gsap

In this I have to do the animation exactly like this

https://www.bennett-tea.com/tea-store#lapsang-souchong

 

But on scrolling down it is not doing that exactly and neither scrolling up. It is not working smooth and also I have to change the background exactly at the same time just like above animation does.

 

Please Help!

See the Pen eYWBqre by aayushigupt (@aayushigupt) on CodePen

[Cassie]

 

Hey there Aayushi!

 

Welcome to the forums! So there's a few things to look at here.

First off - before animating get the layout nailed down. I might even build the colourful block background on the left using SVG so it's nice and easy to scale and you don't have to worry about CSS grid fallbacks or layout bugs.

Secondly - This isn't a scroll triggered animation, the animation is being triggered by wheel/gesture/mouse events

Like this pen -

 

See the Pen PoWapLP by BrianCross (@BrianCross) on CodePen

Hope this helps set you in a better direction

[Aayushi]

Okay, I'll take a look

Thanks