Jump to content
Search Community

Scrolltrigger & ScrollSmoother - how to avoid position fixed in this scene?

Duet Colin test
Moderator Tag

Go to solution Solved by Duet Colin,

Recommended Posts

I have a scene where the base principle works how I want it. But, I want to add ScrollSmoother and this will break my setup/output.

 

See codepen for the code (it doesn't work in codepen, because my actual setup is a bit too complicated to have it up and running in codenpen).

 

And this is a preview of what the code actually does: 

Every image should be a different image and eventually the text also should switch, but this is something I will work on later. I was very happy with this part.

 

This is how it works;

- There are 2 Scrolltriggers

- The first one will add a class (is-active) once the scene hits the top of the viewport. This class will add position fixed on the element that contains the images container and the texts container. 

- While that element is fixed the panels (.panel) will scroll underneath this element. The second scrolltrigger is there to make sure that whenever a .panel hits the image container the second image moves up. 

 

 

 

But, now I wanted to add ScrollSmoother and this completely breaks this setup due to the position: fixed part. I tried different things to solve this, but I can't wrap my head around it. 

 

Anyone has an idea how I can refactor my code and use Scrolltrigger in a different way?

 

Thanks a lot!

See the Pen wvYPLJe by duetdigital (@duetdigital) on CodePen

Link to comment
Share on other sites

Hi,

 

ScrollSmoother doesn't work properly with position fixed as stated in the docs:

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.

 

I forked your example and I used ScrollSmoother with ScrollTrigger and pinning instead of using the add/remove class methods you were using in your original setup:

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

 

I removed some of the templating stuff you had in there.

 

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

Hi @Rodrigo, thank you for comment. 

 

I was aware of the fact that I can't use positioned fixed in combination with ScrollSmoother. 

Also tried to work with pinning in stead of adding/removing a class that sets a position fixed to an element.

The result is far from the same as what you see in my preview on youtube. 

 

I want to see the panels scroll by, underneath the image container. And each time the panel scroll underneath the image container it should reveal the next image, almost looks like the top of the image is connected to the top of the .panel. 

 

Any idea how to do this? 

 

-update-

I tried another setup:  Thought it worked, but now I have the probably that I pin every .panel inside .panels while moving .panels upwards once it triggers. So this way the trigger starts moving :-( . To emphasize, the top of the image needs to stick to the top of the panel. 

 

See the Pen rNqpzMB by duetdigital (@duetdigital) on CodePen

Any idea how to solve this? 

 

 

Link to comment
Share on other sites

  • Solution

Beaten By AI

 

I used this prompt in Chat GPT:

Below I have listed my code of an animation created with HTML, SCSS and Javascript. I use the Javascript animation library GSAP & Scrolltrigger & ScrollSmoother. Because I use ScrollSmoother I can't use position fixed. So I'm tied to pinning elements only. In my Javascript code I loop through the panels and I create for each panel a Scrolltrigger. The trigger is the top of the .panel element. But because their parent element .panels is moving up the triggers also move and this is not ideal. How can I refactor my code in order to keep the triggers in place?

 

And it returned code that solved the issue :-) 

 

See the Pen mdzpxPJ by duetdigital (@duetdigital) on CodePen

 

Answer of ChatGPT:

The issue with your ScrollTrigger animation is that you are pinning the .js_cases element, which is a child of .js_panels. As the .js_panels element moves up due to the ScrollSmoother, the trigger for each panel also moves with it. One solution to keep the triggers in place is to add an empty element with a height equal to the .js_panels element before the .js_cases element. Then, you can pin this element instead of the .js_cases element.


<code>

Here, we add two empty elements with the class
.empty-panel before and after the .js_cases element. We then pin the first .empty-panel element, which is before the .js_cases element, using the height of the .panels element as the end value. We pin the .js_cases element as before, using 'max' as the end value. By pinning the empty panel, we ensure that the ScrollTrigger stays in place, even as the .panels element moves up.

 

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.
×
×
  • Create New...