Jump to content
Search Community

Scrolltrigger not working on fixed modal

kevchcm test
Moderator Tag

Recommended Posts

Hello, I have a problem but I can't seem to find an answer.

I have this custom modal that has a Fixed position but it's scrollable since there is a lot of content.

I need to animate something inside the modal so I create my scrolltrigger when I open the moda, but the trigger doesn't seem to work.

Even if I scroll the trigger line never moves. I left an example as a codepen also I left an image of my site, on the image the start never moves to the scroll-start line of the trigger never move.

I try using the scroller  property but it's not working either.

Any solutions I could try??

Screen Shot 2021-01-14 at 21.21.52.png

See the Pen bGwQJZb by godhandkiller (@godhandkiller) on CodePen

Link to comment
Share on other sites

Hey @kevchcm

 

To make a ScrollTrigger work on a different element than the body, you would want to set a scroller on the respective scrollTrigger.

In your case it would be scroller: '.modal'

 

Also you would have to create the ScrollTrigger after the modal is opened, so ScrollTrigger can correctly get the values it needs.

 

See the Pen c1e149d8835977ff2e5edbccce8d2083 by akapowl (@akapowl) on CodePen

 

 

Depending on what is going to happen to the button later on, for your click-event something to consider might be to implement some logic that only creates the ScrollTrigger the first time the button is clicked, so it doesn't create new ScrollTriggers over and over again.

(You will notice it does so in this example if you click the button again when the modal is already open.)

 

Hope this helps.

 

Cheers,

Paul

 

  • Like 2
Link to comment
Share on other sites

3 hours ago, mikel said:

Hey @kevchcm,

 

Alternatively, you can use visibility: hidden for the modal.

And give the modal content enough height and set the start in 'reachable distance' (e.g. start: 'top 200px').

 

 

 

 

Happy scrolling ...

Mikel

 

Mikel thank you for your answer, I was trying to make this work but there is a huge problem, the property scroller makes the container relative. so if you add any content on the body, the modal is going to show beneath the content.

 

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