Gurvinder Posted November 10, 2021 Share Posted November 10, 2021 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; } 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, }); Link to comment Share on other sites More sharing options...
GreenSock Posted November 10, 2021 Share Posted November 10, 2021 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: Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now