Jump to content


The position cannot be fixed when using ScrollSmoother.

Go to solution Solved by goodcontext,

Recommended Posts

When I used ScrollSmoother, the Circle Text Animation is "position: fixed;", but the location is not fixed.
When you scroll, it moves together.
What's the way to keep them in the same position all the time?

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

Link to comment
Share on other sites

  • Solution

I solved it myself again.


pinReparent: true,
pinType: "fixed"


It works when you fix it with ScrollTrigger.
How do I delete Topic?

  • Like 1
Link to comment
Share on other sites

Good job!


Yeah, you can pin things with scrollTrigger, but if you want elements to be position fixed with CSS they'll need to be outside of the scroll wrapper


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