Jump to content
Search Community

Search the Community

Showing results for tags 'svg animation'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 9 results

  1. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. We recommend using GSAP 3's motionPath instead of the approach outlined here. Please see the GSAP 3 release notes for details. GSAP's BezierPlugin enables you to animate any object along a complex bezier curve. However, it isn't simple for most people to generate the exact coordinates of all the anchor and control points needed to describe a Cubic or Quadratic bezier curve. MorphSVGPlugin to the rescue MorphSVGPlugin's main responsibility is morphing SVG paths and in order to do that, it converts SVG path data internally into bezier curves. We thought it would be convenient to allow users to tap into that functionality. MorphSVGPlugin.pathDataToBezier() converts SVG <path> data into an array of cubic Bezier points that can be fed into a BezierPlugin tween (basically using it as a motion guide)! Watch the video Demo Aren't there other tools that do this? Sure, you could find some github repos or dusty old WordPress blogs that have some tools that move objects along a path. The problem is, what do you do when you need to incorporate one of these animations with other effects? Before long you're loading 5 different tools from different developers and none of the tools can "talk to each other". Choreographing a complex animation becomes a nightmare. What happens when you need to pause or reverse an animation from one of these "free" tools? Chances are you'll be spending dozens of hours trying to make it all work. With GSAP, all our plugins work seamlessly together. Any animation you create using any plugin can be synchronized with hundreds of others. Suppose your client comes to you with a small project with the following requirements: Morph a hippo into an elephant Progressively reveal a curved path Animate the elephant along the path Display captions for each animation Make sure you can play, pause, and reverse the entire sequence Sounds silly, but something like this should be a breeze. How many hours are you going to spend just looking for the tools you need? With GSAP you can build it all in under an hour, with less than a dozen lines of code. See the Pen Sequence of Bonus Plugins by GreenSock (@GreenSock) on CodePen. The demo above uses MorphSVG, DrawSVG and ScrambleText which are available to Club GreenSock members. For more information check out the many benefits of joining Club GreenSock.
  2. 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. Head on over to Codrops to read Chris Gannon's Creating a “Jump Loader” Animation with SVG and GSAP. The article is packed with great tips for animating SVGs with our DrawSVGPlugin. Be sure to check out the full gallery of SVG animation demos too. Read Article
  3. 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
  4. 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
  5. After resizing this animation, the icons that are rotating do a weird vibrating thing. And sometimes the finger flies off. Please help... Thanks
  6. 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!
  7. 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?"
  8. 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.
  9. 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.
×
×
  • Create New...