DK7 Posted May 15, 2022 Share Posted May 15, 2022 Hi, as a GSAP beginner, every day is exciting and you always discover new behaviors that are so completely strange for me I've come across something that's driving me crazy. The page scrolls horizontally, everything is great, but if I place elements like a logo and a burger menu in code before the animated container, they do just scroll out of the page? What is happening here and how can I use css position:fixed; for elements like I can normally do? Thanks for your advice See the Pen ZErBqoE by dkx (@dkx) on CodePen Link to comment Share on other sites More sharing options...
Solution PointC Posted May 15, 2022 Solution Share Posted May 15, 2022 You'll need to move those elements outside of your scroll wrapper. See the Pen dfe28e138684e056e0dc54f7fc605d9c by PointC (@PointC) on CodePen From the docs under Caveats: position: fixed should be outside the wrapper - since the content has a CSS transform applied, browsers create a new containing block and that means position: fixed elements will be fixed to the content rather than the viewport. That's not a bug - it's just how CSS/browsers work. You can use ScrollTrigger pinning instead or you could put any position: fixed elements OUTSIDE the wrapper/content. https://greensock.com/docs/v3/Plugins/ScrollSmoother Happy tweening. 2 Link to comment Share on other sites More sharing options...
DK7 Posted May 15, 2022 Author Share Posted May 15, 2022 Hi @PointC, that's great! I thought I had to do it all with .to() etc. as well. You are my hero of the evening, thank you very much! Did I really only miss these two containers? How good is that? <div id="smooth-wrapper"> <div id="smooth-content"> Thank you very much ! 3 Link to comment Share on other sites More sharing options...
BenjaminO Posted September 4, 2022 Share Posted September 4, 2022 Hello everyone, I was scrolling in the forum to find a solution to a similar problem as @DK7. I wanted to share what I found in case someone, for some reason, doesn't wish to move the element out of smooth-wrapper. In my case I wanted to pin an element within a page but because I am using nuxt 3, I am initiating smoothscroller once in my app.vue file. Consequently, none of my page content can't be pull outside of smooth-wrapper (what is outside of smooth-wrapper should be common to all pages, like a layout) //app.vue file <script setup> import gsap from 'gsap' import ScrollSmoother from 'gsap/ScrollSmoother' import ScrollTrigger from 'gsap/ScrollTrigger' if (process.client) { gsap.registerPlugin(ScrollSmoother, ScrollTrigger) } onBeforeMount(() => { ScrollSmoother.create({ smooth: 2, normalizeScroll: true }) }) </script> <template> // All my fix content common between pages <div id="smooth-wrapper"> <div id="smooth-content"> <NuxtPage /> // my pages with dynamic content </div> </div> </template> To address my problem, I use Scrolltrigger to pin my element in my page like so : // Some page <script setup lang="ts"> import gsap from 'gsap' import ScrollTrigger from 'gsap/ScrollTrigger' if (process.client) { gsap.registerPlugin(ScrollTrigger) } onMounted(() => { ScrollTrigger.create({ trigger: '#gridgalerie_cell1', pin: true, pinSpacing: false, endTrigger: '#gridgalerie' // I changed the trigger to the root div of my page }) }) </script> <template> <div id="gridgalerie" class="grid md:grid-cols-[20%_80%]"> <div id="gridgalerie_cell1" class="h-screen">title</div> // I pinned this div <div id="gridgalerie_cell2"> <div class="h-screen bg-blue-500"></div> <div class="h-screen bg-blue-500"></div> <div class="h-screen bg-blue-500"></div> </div> </div> </template> The key element here is the endTrigger option that allow me to pin the element till the end of the page. It's not the prettiest workaround but I don't see other option at the moment. Happy tweening everyone ! 😄 Link to comment Share on other sites More sharing options...
GreenSock Posted September 4, 2022 Share Posted September 4, 2022 Thanks for sharing your solution! Just so you know, you can do this to make it the end of the page: end: "max" // <-- keyword 👍 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now