Search the Community
Showing results for tags 'svg animation'.
Found 7 results
-
Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. We're excited to announce enhanced SVG support baked right into GSAP's CSSPlugin. Now you can animate the rotation, scale, skew, position (and even change the transform origin) of SVG elements just like normal DOM elements. The chart below illustrates a number of cross-browser bugs related to CSS transforms on SVG elements. Four modern browsers interpret the same basic animation code in drastically different ways. Browser comparison (without GSAP) See the Pen GIFS: SVG + CSS Transform Problems by GreenSock (@GreenSock) on CodePen. Be sure to test the demo above in IE, Opera, FireFox, Safari and Chrome to see equal results. Find out how it all works In order to help a wider audience understand how to get around the obstacles of working with SVG, Jack wrote an article packed with tons of info, animation demos and a video showing all the juicy details on www.css-tricks.com. We're honored that Chris Coyier allowed us to share these enhancements and time-saving techniques with the wider developer community on his highly-respected blog. Get all the juicy details in: SVG Animation and CSS Transforms: A Complicated Love Story. The techniques discussed will surely transform your SVG animation workflow -
Hi guys, just a bit of fun - I had a play around with animating some svg elements recently, but in some browsers the frame detaches from the wheels when you click to wheelie. I just wondered whether anyone had any ideas around this really..? Cheers, J
-
After resizing this animation, the icons that are rotating do a weird vibrating thing. And sometimes the finger flies off. Please help... Thanks
-
So I have been having tons of fun with GSAP for the last month doing animations for an Mobile App Idea I've had for some time. I've used TweenMax and TimelineMax to create some really cool animations with SVGs in a hybrid mobile app using the ionic platform. I've searched the internet and have found lots of help getting started (especially in these forums) but I am not finding anything on battery performance. I ported a minimal version of my app over to my Iphone 6s Plus and was testing it. Everything was working great but then I realized that my battery life was draining fast. I mean 5% in 1 minute. I looked at the diagnostics in Xcode and it was because of the heavy GPU usage. I am going to try using TweenLite and TimelineLite for all those animations that I can but will that decrease battery usage? What have you guys done in your apps to decrease battery usage with GSAP? Or am I using the wrong technologies for what I want to accomplish? Thanks ahead of time!
-
Image: https://www.dropbox.com/s/r2tgtnenucbz3dt/Screenshot 2017-07-23 14.30.07.png I'm trying to make the image on the left (a staple) morph into the image on right ("S") by bending the path into place vs. the effect I currently get with morphSVG. The effect I currently get is more "blob-like" when the transition happens vs. a smooth and graceful bend that I prefer. Any suggestions to help me get on the right "path?"
-
I am trying to create an animation using GSAP and ScrollMagic. The first codepen includes the desired animation. I am trying to trigger this at various parts through the animation. http://codepen.io/c308marketing/pen/RKXJQE The second codepen is the controller I am trying to build to accomplish this. What am I doing wrong? http://codepen.io/c308marketing/pen/WRVyzv Also, there is a black box that is covering the text that fades in…not sure where that is coming from either. Any help would be greatly appreciated.
-
After searching for two hours, I dare to ask this in the forum (I am not even at the point to provide a codepen): Goal I have an SVG that has a shape and the shape is built by hundereds dots (like this image). The goal is to create an animation when the page loads, that all those particles fly in and form the shape (as it is shown on the image). Question What path do I need to take to achieve that? Are there already examples that demonstrate such an animation? I could not find anything like it nor a respective tutorial. Thanks for your help.
