Jump to content
GreenSock

LenaPont

ScrollSmoother deactivates ScrollTrigger

Go to solution Solved by Cassie,

Recommended Posts

Hello,

I'm having a problem setting up ScrollSmoother.

I wrapped an original animation with ScrollTrigger by ScrollSmoother.

Now, ScrollTigger doesn't work.  Am I doing something wrong?

Sorry if I'm asking a silly question.

See the Pen GRdJNoL by lena-pont (@lena-pont) on CodePen

Link to comment
Share on other sites

Hi there, your page has no height, so there's no way to scroll.

It looks like a lot of the styles are gone too - do you have the original demo? That would be very helpful, thanks!

 

 

  • Like 1
Link to comment
Share on other sites

That's also my question.  When I added ScrollSmoother, it changed the height of body.

Here's my original demo.

 

See the Pen abGbZgJ by lena-pont (@lena-pont) on CodePen

 

Link to comment
Share on other sites

  • Solution

Ok, so with ScrollSmoother you're animating the content inside the wrapper - that's what makes it smooth, so you can think of the content div as your 'body'

Because your new 'body' is a transformed div, you can't position things 'fixed' inside that. (It's just how the browser spec works)

So there's a few things you'll need to do

 

1) Make sure you're targeting the right classes. In your demo you have smooth-... in your JS and scroll-... in your HTML

2) Adjust the height of the smooth-content instead of the body

3) Use absolute positioning instead of fixed

 

See the Pen poVJBGo?editors=0010 by GreenSock (@GreenSock) on CodePen

 

  • Like 2
Link to comment
Share on other sites

I see.  Thank you so much!

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