Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

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

Go to solution Solved by Cassie,

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Thanks 1
Link to comment
Share on other sites

  • 3 weeks later...
  • Solution

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!

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.