Use a different trigger with overflow

[mitchsito]

I want to execute an animation with scrollTrigger, but my trigger is inside a div with 'overflow-y' so i used 'scroller: #mydiv' to change the scroller but now the markers are fixed to that div and i want to trigger the animation with the viewport ; so, there's a way to use the 'start' property with two different triggers? i mean something like: 'start: #positionInObject #positionInViewport'

gsap.to('.nos_timeline',{
        scrollTrigger:{
            scroller: '.nos_present', //my div
            trigger: '.nos_present', //trigger inside the div
            start: 'bottom 80% ', //the problem 
            markers: true,
        },
        duration: 1,
        opacity: 1,
        x: '0%'
        
    });

 

[Rodrigo]

Hi @mitchsito and welcome to the GSAP forums!

 

As far as I can tell no, is not possible but I could be wrong about it. Also the proposed code you added:

start: "#positionInObject #positionInViewport"

Seems like a logical impossibility or even a logical nightmare to me. How you track that? When a specific position in the scroller div has passed a specific position in the viewport?

 

For something like this you could use two different ScrollTrigger instances, one for tracking the scroll position in the scroller element and another to check when the scroller element has passed a specific point in the viewport.

 

Also using the same element as the scroller and trigger at the same time also seems like a logical problem to me because at some point the trigger has to pass some point of the scroller, so the scroller has to pass a point within itself? That spells like trouble to me TBH and seems about right that it doesn't work.

 

Finally if you can provide a minimal demo as well it'd be great to see what you're trying to achieve.

 

Happy Tweening!

[mitchsito]

27 minutes ago, Rodrigo said:

Hi @mitchsito and welcome to the GSAP forums!

 

As far as I can tell no, is not possible but I could be wrong about it. Also the proposed code you added:

start: "#positionInObject #positionInViewport"

Seems like a logical impossibility or even a logical nightmare to me. How you track that? When a specific position in the scroller div has passed a specific position in the viewport?

 

For something like this you could use two different ScrollTrigger instances, one for tracking the scroll position in the scroller element and another to check when the scroller element has passed a specific point in the viewport.

 

Also using the same element as the scroller and trigger at the same time also seems like a logical problem to me because at some point the trigger has to pass some point of the scroller, so the scroller has to pass a point within itself? That spells like trouble to me TBH and seems about right that it doesn't work.

 

Finally if you can provide a minimal demo as well it'd be great to see what you're trying to achieve.

 

Happy Tweening!

Hey,  i solved my problem and It was just an error with the 'scroller' property,  i used the incorrect div; now it works fine. Thanks for your time