fourwhitesocks Posted December 20, 2019 Share Posted December 20, 2019 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 More sharing options...
PointC Posted December 20, 2019 Share Posted December 20, 2019 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. 4 Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 20, 2019 Share Posted December 20, 2019 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". 2 Link to comment Share on other sites More sharing options...
fourwhitesocks Posted December 20, 2019 Author Share Posted December 20, 2019 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 More sharing options...
ZachSaucier Posted December 20, 2019 Share Posted December 20, 2019 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 More sharing options...
fourwhitesocks Posted December 21, 2019 Author Share Posted December 21, 2019 Ok Zach gotcha THANK YOU!! Link to comment Share on other sites More sharing options...
fourwhitesocks Posted December 24, 2019 Author Share Posted December 24, 2019 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 More sharing options...
OSUblake Posted December 24, 2019 Share Posted December 24, 2019 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. 5 Link to comment Share on other sites More sharing options...
fourwhitesocks Posted December 24, 2019 Author Share Posted December 24, 2019 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! 1 Link to comment Share on other sites More sharing options...
OSUblake Posted December 24, 2019 Share Posted December 24, 2019 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. 3 Link to comment Share on other sites More sharing options...
fourwhitesocks Posted December 24, 2019 Author Share Posted December 24, 2019 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 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