How to animate Parallax and Pinning at the same time using GSAP's ScrollTrigger

[JAMIUL ISLAM]

I tried to pin the current page (div1) and when the next page(div2) will slide up, the current page (div1) will keep going 30 percent to the top, creating a parallax effect. But the problem is, when The 2nd page(div2) pins and 3rd page(div3) slides up, the 2nd(div2) page's parallax effect breaks the whole design. I need help.

See the Pen WNXZbzQ by lucifer1112k (@lucifer1112k) on CodePen

[OSUblake]

Hi Jamuil,

 

I'm not sure what you're going for here, but you have several tweens targeting all your .section elements. You really shouldn't animate your triggers. I would suggest re-working it so you animate an element inside your section that wraps your image and text.

[JAMIUL ISLAM]

hi @OSUblake ,

here's the new code. I need to animate my website in the way https://www.polywork.com/story. I can pin the section. but I can't animate like the mentioned website. can I get a hint?

See the Pen oNoGNwB by lucifer1112k (@lucifer1112k) on CodePen

[Cassie]

Hey there @JAMIUL ISLAM,

 

This website isn't actually using 'scrolling'. It's actually triggering animations based on events.

Like this demo here...

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

 

Hope this helps!

[JAMIUL ISLAM]

thank you @Cassie