ScrollSmoother element position fixed problem

[DK7]

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

[PointC]

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.

 

[DK7]

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 !  

 

 

[BenjaminO]

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 !

😄

[GreenSock]

Thanks for sharing your solution!

 

Just so you know, you can do this to make it the end of the page: 

end: "max" // <-- keyword

👍