[Different animation in the same scrollTrigger.]

8 minutes ago, mvaneijgen said:

I think you want onLeave to be in the ScrollTrigger object it self, because the tween isn't leaving, but the ScrollTrigger is leaving. Again minimal demo would really help instead of dropping code in comments. 

Bro, wihout any minimal codepen, you helped me, this code is such silly easy for you, and also explained, that doing codepen with isolation will take more time than our conversation.

Regarding my last Q i found that to() has callback, and this one helped me:
tl.to(".ls", {
        yPercent: -100,
        opacity: 0,
        onComplete: () => // Action that i needed,
    })
 

Thank you.

[Different animation in the same scrollTrigger.]

5 minutes ago, mvaneijgen said:

 

Quote

Yes, just wrap your tweens in a normal Javascript if statement and check if the element is on the page. 

Thank you, but below you will see onLeave callback, that fires when page is loaded, now then element is onLeave. Is ia a good place to have this callback?

 

if (document.querySelector('.ls')) {
        tl.to(".ls", {
            yPercent: -100,
            opacity: 0,
            onLeave: () => alert (1)
        })
    }

 

 

[Different animation in the same scrollTrigger.]

Perfect, thanks. I was not aware about this solution.

BTW: Is it possible to have a callback only for one item as shown? This is not working and raise alert on page load, so i suspect there is a way. Thanks a lot !

 

tl.to(".ls", {
        yPercent: -100,
        opacity: 0,
    }, "myLabelStartSameTime")

    tl.to(".rs", {
        yPercent: 100,
        opacity: 0,
        onLeave: () => alert (1)
    }, "myLabelStartSameTime")

[Different animation in the same scrollTrigger.]

Hi,
I have 2 classes that share the same scroltrigger (.main):
 

gsap.fromTo(".ls, .rs", {
        y: "0", opacity: 1}, {y: '-100%', opacity: 0,
        scrollTrigger: {
            trigger: ".main",
            scrub: true, pin: true,
            start: 'top top',
            end: '+=50%',
           
        }
    })

Both has y:'-100%', is there a way for .rs class to be animated y:'100%' instead? So .ls will go up on scroll, and .rs should go down.
Thanks you for any help.

[Scrolltrigger and sections zoom effect]

HI Guys,

i found cool website, that has nice zoom effect.
If you open this link, and wait for animation end, you will see ENTER button, after this you can see this cool zoom animation.
My question is: is it easy to do with scrolltrigger, and are they any examples of similar effect? I can't find anything usefull. Thank you.
https://365ayearof.cartier.com/