Jump to content
GreenSock

Gurvinder

rotationX not working

Go to solution Solved by PointC,

Recommended Posts

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,
});
Link to comment
Share on other sites

Hi @Gurvinder :)

 

Unfortunately 3D transforms are not supported on SVG elements like that. You can rotate the whole SVG or place it in a div and rotate that. You can also use a scaleX/Y animation to fake a rotation.

 

Happy tweening.  

:)

 

 

  • Like 2
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

  • Solution

You fake a Y rotation with a scaleX tween and an X rotation with a scaleY tween.

See the Pen 95493c46a024f24e4d8c26ead210293b by PointC (@PointC) on CodePen

 

Yes, you can add a div to an SVG. That's called a <foreignObject>.  More info:

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject

 

Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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.

:)

 

  • Like 2
Link to comment
Share on other sites

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 

Link to comment
Share on other sites

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.

:)

 

 
Link to comment
Share on other sites

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.

 

 

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

I'd need to see a minimal demo.

 

I'd say svgOrigin would be better than transform-box if you're just trying to target the scale point on the wings.

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×