Scrolltrigger: Pinning Scroll Issue

[mrgreen]

Hi, I'm currently working on an animated landing page based on scroll triggered animations. I have a 'hero section' which has elements animating within it (tree, decorations, etc), these need to animate while the 'hero section' remains pinned while the user scrolls to progress through the animations.

 

My issue is that I cannot scroll when hovering over the hero section when it's pinned and for some reason the container is having "top: 172px" added to it. Somehow the scroll works well when scrolling on that additional grey area (which I don't intend to have as I want the hero section in full height), and the scroll on the hero section doesn't work. I tried adding "z-index: -1" to the hero section and started the pinning trigger at "start: top -20%" then it works as a workaround (source: "https://codepen.io/stevencamilleri-mrg/full/MWvXVNB"), however with that the button inside the content will not remain clickable anymore.

Can anyone look into what I might be doing wrong? The idea is to have the user zoom in/out the tree with different content and decorations showing up.

PS. I would suggest viewing in full view on Codepen in desktop

See the Pen QWMxQVb by stevencamilleri-mrg (@stevencamilleri-mrg) on CodePen

[GreenSock]

Wow! You've got a LOT going on in there. Almost 1500 lines of HTML/CSS/JS. It's always best to isolate the issue as much as possible and provide only a minimal demo. 

 

A few things I noticed: 

1. You're animating the element that you're pinning - that's almost always a very bad idea. You can put it into a container that you pin instead. I think the top offset is caused by this issue - it's calculating the offsets and THEN You're animating the element, throwing those calculations off. 
2. You've got the body and html elements set to height: 100% in your CSS which prevents scrolling when the element is pinned as position: fixed. 
3. You're using CSS transitions - DEFINITELY avoid those on anything you're also controlling with JS animations. 
4. You're using invalid end values like end: "bottom" - those are supposed to have two values like "bottom top"
5. You're using x: with a percentage instead of using xPercent.
6. You've got scrub: true AND toggleActions (that doesn't break anything - it just ignores toggleActions because logically you cannot have both). 
7. You're using old/stale versions of GSAP/ScrollTrigger

I removed the height: 100% on your CSS and eliminated your animation of the pinned element here: 

See the Pen rNzKKwL?editors=0010 by GreenSock (@GreenSock) on CodePen

 

If you still need some help, please make sure you create a separate CodePen with only the absolutely essential parts to show the issue you're struggling with. We're happy to help with any GSAP/ScrollTrigger-specific questions.

[mrgreen]

Thanks a lot for your help! Noted all your remarks and thanks for pointing those issues out.