Jump to content

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

Grid scaling on scroll DEMO VS REALITY

Recommended Posts

Hi all, here https://staging11.whynot.media/su-di-noi/ I followed (ehmm... forked 😛)  GSAP official DEMO, as you can see here: 

But cant understand 2 things:

  • why on my page the grid jumps to right
  • how to show the content above/below ? It seems on my page, which is the replica of the demo, the content is eaten by the grid container, or it's literally too far (more than 1900px on my laptop)
  • why the gsap zoom-out function starts working, and then after a deep scroll... seems a bug, the grid jumps below, already scaled.

    Really Thanks for any help!

See the Pen wvKwZXG by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Unfortunately it just isn't feasible to troubleshoot live web sites, and it looks like the CodePen you provided works fine, right? If you still need some help, please isolate each issue in a VERY simplified CodePen demo and we'd be happy to take a look. There are just too many factors in a live site and we're not able to edit the code and see the results like we can in a CodePen or CodeSandbox. 


From a cursory glance, it looks to me like the problem is that you're pinning an element that's INSIDE a container that has a transform applied to it which makes position: fixed behave very differently. That has nothing to do with GSAP - it's just how the spec works. I'd strongly recommend removing those transforms on the ancestor elements or you could set pinType: "transform" on your ScrollTrigger.  

  • 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.