Search the Community
Showing results for tags 'pin spacer'.
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
I am working on a website that requires a grid of blog posts to be pinned whilst animating in. Once they have animated in the pin ends and another section needs to follow immediately, unfortunately there is a large amount of white space between these two sections. I have turned off pinSpacing but this has had no effect. I'm not sure what else to try at this point.
Hello, I'm trying to refresh my button animation without having to put it after the main animation (it's my paradigm). As you can see the start marker is situated where the button was before the pin spacer of the main animation was added. Thanks for your help