Scrolltrigger not working on fixed modal

[kevchcm 6 Likes (Newbie)]

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

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

[akapowl 5,139 Likes (Superhero)]

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

 

[mikel 4,774 Likes (Superhero)]

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

 

See the Pen rNMoOaq?editors=0110 by mikeK (@mikeK) on CodePen

 

Happy scrolling ...

Mikel

 

[kevchcm 6 Likes (Newbie)]

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.

 

[mikel 4,774 Likes (Superhero)]

 

Hmmm, I don't understand your problem. Please show a CodePen.

 

See the Pen ab52be56e2dcc615558b756453ade0ae?editors=1100 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel