Gurvinder

@PointC can you please help me .. everything is working fine on flapping wings of birds on scroll... but transform-box: fill-box is not working there.. as wings gets apart from bird and moves down...

Thank you so much Craig.. your answers were very helpful

wings are in their on timeline.. but i want to trigger both wings in same timeline.. with different property values..

i tried like this but it doesn't works..

can i use different animation properties for target1 and different for target2 in same tween?

i want to animate with different animation properties in single tween with timeline.. is that possible? for example i want to fly svg bird and rotate wings of bird at same point the bird moves

Thanx @PointC it's working.. also can you please tell me if i can animte two elements inside single tween?

or should i add and remove css classes ?

How can i rotate it like rotateX with scaleX and can i put div inside svg?

rotationX not working svg path.. rotation is working fine.. const wingTl = gsap .timeline({ scrollTrigger: { trigger: wingBehind, start: "top 80%", scrub: 1, ease: Sine.easeOut, markers: false, }, }) .to(wingBehind, { // rotation: 192, rotationX: 192, });

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, });