[rotationX not working]

 @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... 

 

[rotationX not working]

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

[rotationX not working]

Just now, PointC said:

If you're flapping the wings and moving the body, you'd want separate tweens for that. You can put them both on a timeline or maybe the wings are their own timeline. I can't really advise without seeing a minimal demo. If you could put that together, we are better able to point you in the right direction.

 

 

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

[rotationX not working]

3 minutes ago, Gurvinder said:

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

 

  .to(
    wingBehind,
    wingFront,
    {
      scaleY: 0,
      duration: 1,
    },
    {
      scaleY: -1,
      duration: 1,
    }
  );

 

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

[rotationX not working]

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

26 minutes ago, PointC said:

Sure. The easiest way is to target a common class. If that's not an option, you can add multiple targets to the tween. In the case of my demo above, you'd write it like this:

 

gsap.to("#target1, #target2", {
  scaleX: 0,
  transformOrigin: "center center",
  ease: "sine.inOut",
  repeat: -1,
  yoyo: true
});

Happy tweening.

 

[rotationX not working]

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 

[rotationX not working]

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

 

[rotationX not working]

or should i add and  remove css classes ?

 

[rotationX not working]

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

 

[rotationX not working]

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,

});

[Change animation in middle of ScrollTrigger scrub .]

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