multiple callbacks

[artstyle]

const s2_enter = gsap.timeline({paused:true, defaults: {opacity: 0,ease: "expo.inOut"}})

.from(".s2-block-left",{xPercent:-100,duration: 1})

.from(".s2-block-right",{xPercent:100,duration: 1},"<")

.from(".section2-text2",{x: -500,duration: 1})

.from(".section2-heading",{x:-300,duration: 1},"<")

.from(".s2-img1",{x:1000,duration: 0.5},"<")

.from(".s2-img2",{x:1000,duration: 0.5},"<")

.from(".s2-triangle",{duration:0.5,},"<");

 

const s2_exit = gsap.timeline({paused:true, defaults: {opacity: 1}})

.to(".s2",{opacity: 0});

 

const s2_timeline = gsap.timeline({ scrollTrigger: {

    trigger: ".s2",

    scrub: 1.5,

    start: "top top",

    end: "bottom top",

    pin: true,

    toggleActions: "play reverse play reverse",

    onEnter: () => s2_enter.play(),

    onLeaveBack: () => s2_exit.play(),

}

});

 

Hello. how can i play multiple animations on callback?
1. i want to play onEnter only entering animation s2_enter

2. onLeaveBack i want to play fade out animation s2_exit

3. now because the s2_exit animation made .s2 block invisible(opacity 0 )
i want to play 2 different animations s2_enter and s2_exit-reverse

what is the best way to do this?

[ZachSaucier]

Hey artstyle. Inside of the callback functions you can fire whatever animations, functions, or logic that you want. Your question doesn't make it clear to me what your goal is so it's hard to help past that. Perhaps if you made a minimal demo we could help more pointedly?