Jump to content
Search Community

rotationX not working

Gurvinder test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

  • 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

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

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

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

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.
×
×
  • Create New...