Change animation in middle of ScrollTrigger scrub .

[Gurvinder]

I'm trying to fly bird svg with scrolltrigger.. it flips back when it reaches the end point of scroll scrub, i want to flip that if i scrollup in middle of end point.

 

Here's my code: 

.bird {
transform: scaleX(1);
}

.bird-flip {
transform: scaleX(-1) !important;
}

1. const tl = gsap
   .timeline({
   scrollTrigger: {
   trigger: bird,
   start: "top 80%",
   scrub: 1,
   
   onEnter: () => {
   
   birdTwo.classList.remove("bird-flip");
   console.log("entered");
   },
   onLeave: () => {
   
   birdTwo.classList.add("bird-flip");
   console.log("leaved");
   },
   onEnterBack: () => {
   
   birdTwo.classList.add("bird-flip");
   console.log("enteredback");
   },
   onLeaveBack: () => {
   
   birdTwo.classList.remove("bird-flip");
   console.log("leavedback");
   },
   
   ease: Sine.easeOut,
   markers: false,
   },
   })
   .to(bird, {
   x: 120,
   rotation: 25,
   })
   
   .to(bird, {
   x: 320,
   rotation: -20,
   })
   
   .to(bird, {
   x: 520,
   rotation: 25,
   })
   .to(bird, {
   x: 600,
   rotation: 20,
   })
   .to(bird, {
   x: 700,
   rotation: -20,
   })
   .to(bird, {
   x: 920,
   rotation: 25,
   })
   .to(bird, {
   x: 1100,
   rotation: 20,
   })
   .to(bird, {
   x: 1280,
   rotation: -20,
   })
   .to(bird, {
   x: 1400,
   rotation: 25,
   })
   .to(bird, {
   x: 1600,
   rotation: 20,
   })
   .to(bird, {
   x: 1940,
   rotation: -20,
   })
   .to(bird, {
   x: 2040,
   rotation: -20,
   });

[GreenSock]

Welcome to the forums, @Gurvinder. I read your question a few times and I still don't really understand what you're asking. Can you please also provide a minimal demo (like a CodePen) as well as more details about what your question is?

 

By the way, you should always set your transforms via GSAP, not just in CSS. We explain some of the reasons here: