Jump to content
Search Community

It's a scroll trigger, and the position moves arbitrarily.

goodcontext test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

If you scroll up the start-4th-2 above the scroller-start-4th-2, you can see that the L letters and red backgrounds move arbitrarily.
I don't know what to do because it moves even though Position: absolute.

 

.scroll_page, .scroll_page * {
transform-style: preserve-3d;
}

 

Or

 

.image_wrap {
position: relative;
top: 0;
width: 100vw;
z-index: 0;
}

 

If you remove these, they work normally.
I think it's because of preserve-3d.
"transform-style: preserve-3d;" is essential.

See the Pen OJOEKxN by goodcontext (@goodcontext) on CodePen

Link to comment
Share on other sites

Hi goodcontext,

 

The problem is that position fixed won't work inside a container with transforms. It's a CSS thing.

 

You should add pinReparent: true to your trigger.

 

Quote
pinReparent Boolean - If true, the pinned element will be reparented to the <body> while it is actively pinned so that it can escape any ancestor containing blocks. If you notice odd behavior while pinning (like the pinned element suddenly shifting and then moving with the scroll), you probably have a transform or will-change on an ancestor element which breaks position: fixed behavior (it's a browser thing, not ScrollTrigger). It's best to set up your project to avoid those because reparenting can be expensive, but pinReparent: true can bail you out if you can't avoid them. Only use this feature if you must. Warning: if you have CSS rules that rely on specific nesting that'd be affected by the reparenting, they'll break. For example, a CSS rule like .section .panel p {color: white} wouldn't apply to the nested <p> anymore if you pin the .panel element with pinReparent: true because during the pin, it would no longer be inside the <section>, so make sure you write your CSS rules to accommodate the reparenting.

 

  • Like 1
Link to comment
Share on other sites

Thank you for your good answer.
By the way, if you use pinRepresent: true, it works well with the code pen.

However, the L-letter and red background disappears from the site I created, and it reappears after a long scroll.
In short, in the past, the location changed arbitrarily, but now it disappears instead of changing its location.
Should I use CSS to fix it instead of pinRepresent: true?

Link to comment
Share on other sites

  • Solution
1 hour ago, goodcontext said:

However, the L-letter and red background disappears from the site I created, and it reappears after a long scroll.

 

Sounds like it might be a z-index/layering issue if disappear and then reappears. 🤷‍♂️

 

And I don't know how you would fix it with just CSS because you said you needed the preserve-3d. Maybe try using pinType: "transform"

 

Quote
pinType "fixed" | "transform" - by default, position: fixed is used for pinning only if the scroller is the <body>, otherwise transforms are used (because position: fixed won't work in various nested scenarios), but you can force ScrollTrigger to use position: fixed by setting pinType: "fixed". Typically this isn't necessary or helpful. Beware that if you set the CSS property will-change: transform, browsers treat it just like having a transform applied, breaking position: fixed elements (this is unrelated to ScrollTrigger/GSAP). 

 

 

  • Like 1
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...