Gurvinder Posted November 12, 2021 Share Posted November 12, 2021 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 More sharing options...
PointC Posted November 12, 2021 Share Posted November 12, 2021 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. 2 Link to comment Share on other sites More sharing options...
Gurvinder Posted November 12, 2021 Author Share Posted November 12, 2021 How can i rotate it like rotateX with scaleX and can i put div inside svg? Link to comment Share on other sites More sharing options...
Gurvinder Posted November 12, 2021 Author Share Posted November 12, 2021 or should i add and remove css classes ? Link to comment Share on other sites More sharing options...
Solution PointC Posted November 12, 2021 Solution Share Posted November 12, 2021 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. 3 Link to comment Share on other sites More sharing options...
Gurvinder Posted November 12, 2021 Author Share Posted November 12, 2021 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 More sharing options...
PointC Posted November 12, 2021 Share Posted November 12, 2021 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. 2 Link to comment Share on other sites More sharing options...
Gurvinder Posted November 12, 2021 Author Share Posted November 12, 2021 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 More sharing options...
Gurvinder Posted November 12, 2021 Author Share Posted November 12, 2021 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 More sharing options...
PointC Posted November 12, 2021 Share Posted November 12, 2021 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. 2 Link to comment Share on other sites More sharing options...
Gurvinder Posted November 12, 2021 Author Share Posted November 12, 2021 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 More sharing options...
Gurvinder Posted November 12, 2021 Author Share Posted November 12, 2021 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 More sharing options...
PointC Posted November 12, 2021 Share Posted November 12, 2021 In that case you can use wrap(). https://greensock.com/docs/v3/GSAP/UtilityMethods/wrap() Basic usage. See the Pen 96a2ba5e7c0001eba9ec2774fe392b89 by PointC (@PointC) on CodePen Happy tweening. 3 Link to comment Share on other sites More sharing options...
Gurvinder Posted November 12, 2021 Author Share Posted November 12, 2021 Thank you so much Craig.. your answers were very helpful 2 Link to comment Share on other sites More sharing options...
Gurvinder Posted November 12, 2021 Author Share Posted November 12, 2021 @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 More sharing options...
PointC Posted November 12, 2021 Share Posted November 12, 2021 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. 1 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