JohnnyD Posted February 7 Share Posted February 7 Hello! I'm trying to create a nice flip or rotation effect for the individual tiles in this SVG (I have multiple similar SVGs on the same page, but just showing one in the demo for now though). I currently have a rotation from 0 to 90deg, but would rather set it up to go from 90deg to 0, however when I tried adding "transform: rotate(90deg)" to the SVG path elements "style" tag, most of the image just disappeared (not totally sure why). So, one question is how can I set the initial state so that the individual tiles are rotated 90deg? Also, a co-worker suggested possibly using the Flip plugin, but haven't got that far yet. Anyway, any thoughts/suggestions would be appreciated! See the Pen LYamZRV by jduttera (@jduttera) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted February 7 Solution Share Posted February 7 It's always best to set transform-related stuff directly through GSAP to ensure maximum performance and cross-browser compatibility. So you could set the initial state like this: gsap.set(".tile-pattern path", {rotation: 90, transformOrigin: "50% 50%"}); You don't need to create a timeline if you're only populating it with one tween. It's totally fine to do that, but you could simplify it slightly by using a simple tween: See the Pen KKEBEPN?editors=1010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
JohnnyD Posted February 8 Author Share Posted February 8 Great! Thank you so much. And that clears up setting the initial state in GSAP too. Thanks again! Link to comment Share on other sites More sharing options...
Cassie Posted February 8 Share Posted February 8 Also just to clarify - Flip plugin isn't for visually flipping stuff. That can just be done with normal transforms It stands for First, Last, Invert, Play - It's a technique for complex layout animations where there are structural changes to the DOM (not necessary for just animating some rotation on SVG elements) Link to comment Share on other sites More sharing options...
JohnnyD Posted February 8 Author Share Posted February 8 Ah yes, good point...thanks for making that clear! 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