Jump to content
GreenSock

fourwhitesocks

Spinning an SVG shape inside of an svg logo

Recommended Posts

Hello and apologizing up front, first time posting here ?.  Also my first foray into GSAP keep that all in mind.

Trying to animate a shape path in an svg logo; attached pen is not the actual logo but it does include a triangle in the real wild ;-)

I'm wanting to use GSAP3 to just slowly 'spin' the triangle; not rotate it.  I included more below if you scroll down to what I'm hoping I can make it look like with a regular just css animation as a demo.

 

THANK YOU ahead of time for any help!

 

 

See the Pen jOEBMbV by fourwhitesocks (@fourwhitesocks) on CodePen

Link to comment
Share on other sites

Welcome to the forum.

 

You can't use 3D transforms on SVG child elements like that, but you can fake the rotation with a scaleX animation.

 

gsap.to(".yellow-triangle", {
  duration: 1.5,
  scaleX: 0,
  transformOrigin: "50% 50%",
  repeat: -1,
  yoyo: true
});

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

 

 

 

Happy tweening and welcome aboard.

:)

 

  • Like 4
Link to comment
Share on other sites

Hey fourwhitesocks and welcome to the GreenSock forums! 

 

Craig pointed out the main issue.

 

Another work around would be to put the logo text and the triangle in two separate SVG elements. Then you can rotate the actual SVG element of the triangle. If you use this approach, you need to make sure that the triangle is in the center of the SVG though.

See the Pen KKwWrrd?editors=0100 by GreenSock (@GreenSock) on CodePen

 

Side note: you can't have spaces in an ID. So id="spinning logo triangle" should be something like id="spinning-logo-triangle".

 

  • Like 2
Link to comment
Share on other sites

Ok wow thank you guys for the quick responses!  ** I was aware of the spacing issue, not sure why I wrote it like that my bad ? !

This is such a great start tho; both for my intro into gsap and to this project! 

Craig that looks like a possible solution.

Zach, kinda funny I had thought about that scenario just last night, but wasn't sure!  So it appears that it's moving a little bit horizontally tho?  Am seeing that correctly that it jumps a little to the side?  If it was in the center (have to figure that one out ;-) ) would it appear to remain rotating only around the y axis then? 

Link to comment
Share on other sites

4 minutes ago, fourwhitesocks said:

it appears that it's moving a little bit horizontally tho?  Am seeing that correctly that it jumps a little to the side?  If it was in the center (have to figure that one out ;-) ) would it appear to remain rotating only around the y axis then? 

Yes. If you use the method I suggested then I would recommend creating an SVG that's only large enough to hold the triangle (and not have any extra white space). Then you can align that with the rest of your logo using CSS.

Link to comment
Share on other sites

A developer friend mentioned that leaving it 'spinning' all the time in a logo would possibly be too many js calls or that this might hamper performance of the site; can you explain how leaving it spinning would affect performance of the site, esp if it's at the top of every page in the header ;-)  !

Link to comment
Share on other sites

49 minutes ago, fourwhitesocks said:

A developer friend mentioned that leaving it 'spinning' all the time in a logo would possibly be too many js calls or that this might hamper performance of the site

 

Does it hamper the performance of your site? If yes, change it. If no, then it's probably not a problem. 

 

49 minutes ago, fourwhitesocks said:

can you explain how leaving it spinning would affect performance of the site, esp if it's at the top of every page in the header ;-) !

 

The location doesn't matter. JavaScript code is still running to make it animate. 

 

BUT.... just because JavaScript is running does mean there is going to be a performance problem. Most people don't understand what affects performance. GSAP JavaScript code will almost never be a performance issue. It's more about WHAT your are animating. Browser rendering is almost always the performance bottleneck.

 

To maximize performance, you can animate a div instead of an SVG with force3D set to true, and set will-change: transform; in the css.

 

gsap.to("#spinning-logo-triangle", {
  duration: 3, 
  scaleX: 0,
  yoyo: true,
  repeat: -1,
  force3D: true
});

 

More advanced optimizations could include only animating the triangle when the logo is visible, but that's beyond the scope of this post.

 

In the end, I think your friend is making a mountain out of a molehill for such a simple animation.

  • Like 5
Link to comment
Share on other sites

OK wow thank you for all of that.  I did appreciate my friends input tho because he made me think about the impact on the page's performance which is something I always want to keep in mind :) I did understand that the location of the animation in the code does not matter; I only mentioned that because well it would probably be in every header; and I was aware that GSAP itself isn't an issue.   I appreciate the clarification on the rest of it esp the way to enhance the performance !  Thank you!!

 

Some minds think alike because the next part I was already preparing to tackle is only have that spin when it's visible lol!  Good call!

You guys rock!  Much appreciated!

  • Like 1
Link to comment
Share on other sites

5 minutes ago, fourwhitesocks said:

Some minds think alike because the next part I was already preparing to tackle is only have that spin when it's visible lol!

 

The most performant way to do that is with the Intersection Observer API.

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

 

You can toggle the play and paused states of an animation based on if an element is visible. If you search around the forums, there are plenty of example of how to do this.

 

 

  • Like 3
Link to comment
Share on other sites

I just did a great tutorial on it about a month ago that was super from Kevin Powell's youtube channel so yep good idea!  

 

Merry Christmas !!!  ?

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