Jump to content
Search Community

Rotation set matrix hide element SVG

biggabba test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,

I having little trouble with executing my rotation on ellipse already rotated. When animation arrive to point js sets to transform matrix which disappear the item.

Here is my example.  Can you please someone adjust so it will work?

 

<g id="telo">
            <ellipse id="path3557" cx="40.935" cy="145.17" rx="1.5368" ry="2.0713" fill="#0a0a0a" stroke-width=".265"/>
            <ellipse id="path3559" cx="40.968" cy="152.46" rx=".91535" ry="4.5569" fill="#0a0a0a" stroke-width=".23837"/>
            <ellipse id="pravaruka" transform="rotate(-38.801)" cx="-61.161" cy="146" rx=".35332" ry="3.8743" fill="#0a0a0a" stroke-width=".265"/>
            <ellipse id="levaruka" transform="rotate(.81725)" cx="42.963" cy="151.7" rx=".34602" ry="3.8743" fill="#0a0a0a" stroke-width=".265"/>
            <path id="path3581" d="m38.65 145.63 0.89196 7e-3 0.75931-1.5496 1.658-0.29831 1.5477-1.9189-1.8174 0.62294-1.4213-1.3172-0.68486 1.8977-1.5662 0.36579z" fill="#f9f9f9" stroke-width=".26458px"/>
</g>
<script>
var tl = new TimelineMax({repeat:-1}),
pravaruka = "#pravaruka";
tl.to(pravaruka, 2, {rotation: "+=2"})
</script>
Link to comment
Share on other sites

It's hard to say exactly because I can't see the whole SVG, but my guess is you are rotating the ellipse out of the SVG bounds. You're not specifying an x/y point for your rotation so the default origin is used. More info:

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform#Rotate

 

GSAP has no problem animating a relative rotation on an ellipse that has already been rotated. You should also look at SVG origin.

https://greensock.com/gsap-1-16

 

Here's a quick demo.

See the Pen RBqGwQ by PointC (@PointC) on CodePen

 If you have other questions, please provide a demo rather than just a piece of your code. More info about that:

Hopefully that helps. Happy tweening.

:)

 

  • Like 6
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...