Jump to content
GreenSock

Search the Community

Showing results for tags 'svg'.

  • 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

  1. 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. Since launching MorphSVGPlugin, we've made a bunch of improvements and exposed several new features. Here are the highlights... The challenge Before we dive into solutions, it helps to understand the tasks that MorphSVGPlugin must perform in order to work its magic: Convert the path data string into pure cubic Beziers Map all of the segments between the start and end shapes (match them up), typically based on size and position If there are more segments in one than the other, fabricate new segments and place them appropriately Subdivide any segments with mis-matching point quantities If a shapeIndex number isn't defined, locate the one that delivers the smoothest interpolation (shortest overall distance that points must travel). This involves looping through all the anchor points and comparing distances. Convert all the data back into a string Isolate the points that need to animate/change and organize a data structure to optimize processing during the tween. That may sound like a lot of work (and it is) but MorphSVGPlugin usually rips through it with blazing speed. However, if you've got a particularly complex path, you'll appreciate the recent improvements and the new advanced options: Performance tip #1: define a shapeIndex MorphSVGPlugin's default shapeIndex:"auto" does a bunch of calculations to reorganize the points so that they match up in a natural way but if you define a numeric shapeIndex (like shapeIndex:5) it skips those calculations. Each segment inside a path needs a shapeIndex, so multiple values are passed in an array like shapeIndex:[5,1,-8,2]. But how would you know what numbers to pass in? The findShapeIndex() tool helps for single-segment paths, what about multi-segment paths? It's a pretty complex thing to provide a GUI for. Typically the default "auto" mode works great but the goal here is to avoid the calculations, so there is a new "log" value that will act just like "auto" but it will also console.log() the shapeIndex value(s). That way, you can run the tween in the browser once and look in your console and see the numbers that "auto" mode would produce. Then it's simply a matter of copying and pasting that value into your tween where "log" was previously. For example: TweenMax.to("#id", 1, {morphSVG:{shape:"#otherID", shapeIndex:"log"}}); //logs a value like "shapeIndex:[3]" //now you can grab the value from the console and drop it in... TweenMax.to("#id", 1, {morphSVG:{shape:"#otherID", shapeIndex:[3]}}); Notes shapeIndex:"log" was added in MorphSVGPlugin version 0.8.1. A single segment value can be defined as a number or a single-element array, like shapeIndex:3 or shapeIndex:[3] (both produce identical results) Any segments that don't have a shapeIndex defined will always use "auto" by default. For example, if you morph a 5-segment path and use shapeIndex:2, it will use 2 for the first segment and "auto" for the other four. Performance tip #2: precompile The biggest performance improvement comes from precompiling which involves having MorphSVGPlugin run all of its initial calculations listed above and then spit out an array with the transformed strings, logging them to the console where you can copy and paste them back into your tween. That way, when the tween begins it can just grab all the values directly instead of doing expensive calculations. For example: TweenMax.to("#id", 1, {morphSVG:{shape:"#otherID", precompile:"log"}}); //logs a value like precompile:["M0,0 C100,200 120,500 300,145 34,245 560,46","M0,0 C200,300 100,400 230,400 100,456 400,300"] //now you can grab the value from the console and drop it in... TweenMax.to("#id", 1, {morphSVG:{shape:"#otherID", precompile:["M0,0 C100,200 120,500 300,145 34,245 560,46","M0,0 C200,300 100,400 230,400 100,456 400,300"]}}); As an example, here's a really cool codepen by Dave Rupert before it was precompiled: http://codepen.io/davatron5000/pen/meNOqK/. Notice the very first time you click the toggle button, it may seem to jerk a bit because the entire brain is one path with many segments, and it must get matched up with all the letters and figure out the shapeIndex for each (expensive). By contrast, here's a fork of that pen that has precompile enabled: http://codepen.io/GreenSock/pen/MKevzM. You may noticed that it starts more smoothly. Notes precompile was added in MorphSVGPlugin version 0.8.1. Precompiling only improves the performance of the first (most expensive) render. If your entire morph is janky throughout the tween, it most likely has nothing to do with GSAP; your SVG may be too complex for the browser to render fast enough. In other words, the bottleneck is probably the browser's graphics rendering routines. Unfortunately, there's nothing GSAP can do about that and you'll need to simplify your SVG artwork and/or reduce the size at which it is displayed. The precompiled values are inclusive of shapeIndex adjustments. In other words, shapeIndex gets baked in. In most cases, you probably don't need to precompile; it's intended to be an advanced technique for squeezing every ounce of performance out of a very complex morph. If you alter the original start or end shape/artwork, make sure you precomple again so that the values reflect your changes. Better segment matching In version 0.8.1, there were several improvements made to the algorithm that matches up corresponding segments in the start and end shapes so that things just look more natural. So even without changing any of your code, loading the latest version may instantly make things match up better. map: "size" | "position" | "complexity" If the sub-segments inside your path aren't matching up the way you hoped between the start and end shapes, you can use the map special property to tell MorphSVGPlugin which algorithm to prioritize: "size" (the default) - attempts to match segments based on their overall size. If multiple segments are close in size, it'll use positional data to match them. This mode typically gives the most intuitive morphs. "position" - matches mostly based on position. "complexity" - matches purely based on the quantity of anchor points. This is the fastest algorithm and it can be used to "trick" things to match up by manually adding anchors in your SVG authoring tool so that the pieces that you want matched up contain the same number of anchors (though that's completely optional). TweenMax.to("#id", 1, {morphSVG:{shape:"#otherID", map:"complexity"}}); Notes map is completely optional. Typically the default mode works great. If none of the map modes get the segments to match up the way you want, it's probabaly best to just split your path into multiple paths and morph each one. That way, you get total control. Animate along an SVG path The new MorphSVGPlugin.pathDataToBezier() method converts SVG <path> data into an array of cubic Bezier points that can be fed directly into a BezierPlugin-based tween so that you can essentially use it as a motion guide. Watch the video Demo See the Pen pathDataToBezier() docs official by GreenSock (@GreenSock) on CodePen. Morph back to the original shape anytime If you morph a path into various other shapes, and then you want to morph it back to its original shape, it required saving the original path data as a variable and feeding it back in later. Not anymore. MorphSVGPlugin records the original path data in a "data-original" attribute directly on the element itself, and then if you use that element as the "shape" target, it will automatically grab the data from there. For example: TweenMax.to("#circle", 1, {morphSVG:"#hippo"}); //morphs to hippo TweenMax.to("#circle", 1, {morphSVG:"#camel"}); //morphs to camel TweenMax.to("#circle", 1, {morphSVG:"#circle"}); //morphs back to circle. Conclusion We continue to be amazed by the response to MorphSVGPlugin and the creative ways we see people using it. Hopefully these new features make it even more useful. How do I get MorphSVGPlugin? If you're a "Shockingly Green" or "Business Green" Club GreenSock member, just download the zip from your account dashboard or the download overlay on GSAP-related page on this site. If you haven't signed up for Club GreenSock yet, treat yourself today.
  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. The latest version of GSAP delivers some fun new features that open up entirely new animation possibilities. Check out the videos and demos below that show what's so exciting about 1.18.0. Here's a quick summary: New "cycle" property allows you to add rich variations to staggered animations Relative HSL color tweens (affect just the hue, saturation or lightness) Complex string tweening like "1px 5px rgb(255,0,0)" Numerous improvements and bug fixes (see github) New "cycle" property for staggered animations Have you ever wanted to animate a bunch of elements/targets and alternate between certain values (or even randomize them) in a staggered fashion? The new super-flexible "cycle" property does exactly that. Instead of defining a single value (like x:100, rotation:90), you can define an Array of values to cycle through (like cycle:{x:[100,-100], rotation:[30,60,90]}) or even use function-based values (like cycle:{x:function() { return Math.random() * 200; }}). The amount of functionality you can pack into a single line of code is staggering (pun intended). Demo: array-based and function-based "cycle" values See the Pen Basic staggerTo() using cycle by GreenSock (@GreenSock) on CodePen. Advanced "cycle" effects with SplitText See the Pen SplitText with stagger and cycle by GreenSock (@GreenSock) on CodePen. Caveats The cycle property is available only in the staggerTo(), staggerFrom(), and staggerFromTo() methods in TweenMax, TimelineLite and TimelineMax. When using function-based values the function will be passed an argument which represents the index of the current tween. Inside the function body, the scope (this) refers to the target of the current tween (see source of first demo above). Relative HSL color animation Have you ever wanted to tween a color to something a little darker or lighter without having to guess at cryptic hex values? How about tween a hue to 180 degrees around the color wheel? With relative HSL tweening, it's easy. You can now use familiar relative prefixes ("+=" and "-=") directly inside hsl() strings! //30% darker backgroundColor:"hsl(+=0, +=0%, -=30%)" //to grayscale (0% saturation) backgroundColor:"hsl(+=0, 0%, +=0%)" //opposite color (180 degrees around the other side of the color wheel) backgroundColor:"hsl(+=180, +=0%, +=0%)" Relative HSL demo See the Pen Relative HSL color tweening in GSAP 1.18.0 by GreenSock (@GreenSock) on CodePen. Caveats Be careful about doing relative tweens when they could be interrupted. For example, if you have a mouseover that creates tween to +=30% and then a mouseout that does -=30% and then the user rolls over/out/over/out, you'll get odd results because of the nature of relativity. For bullet-proof rollover effects with relative values check out the demo we used in the video: Hover Demo with Relative HSL Values When you tween to a saturation of 0%, that basically loses any kind of hue data - the underlying color/hue of grayscale is non-existent. So then if you try tweening back to a saturation of 80% or something, it'll be red because that's the default zero position of hue. For example, tween a blue <div> to "hsl(+=0, 0%, +=0%)" and then to "hsl(+=0, 80%, +=0%)", it'll end up red instead of blue. That's not a bug - it's just the nature of colors in the browser (they end up in the rgb color space). Tween complex string-based values Complex string-based values containing multiple numbers can be animated without any extra plugins. For example, a value like "10px 20px 50px" can be animated to "4px 13px 200px". GSAP will find each number in the strings (in order), compare them and animate the ones that changed. CSSPlugin already does this for CSS values and it even converts units, but the base engine (TweenLite) can now do basic string tweening. It will even find rgba(...) values and make sure to round them appropriately during animation. This new feature extends to AttrPlugin too which means it can animate the complex strings inside SVG element attributes like the points in a <polygon> or <polyline> or even <path> data (please carefully read the caveats below). See the Pen Complex string-based tweening: simple shape morph by GreenSock (@GreenSock) on CodePen. Caveats This feature is NOT intended to perform complex shape morphing in SVG. It simply animates the numbers inside the strings (in order). Robust shape morphing requires dynamically parsing path data and injecting extra points in certain cases. This new complex string-based tweening lays the groundwork in the core to do a lot of advanced effects in the future, especially via plugins. If you're animating the "d" attribute of a <path> element or the "points" attribute of a <polygon> or <polyline> element, keep in mind that you MUST make sure the number (and type) of points match between the starting and ending values. And since those are attributes, use the AttrPlugin (which is already inside TweenMax). Community Demos City Construction by Sarah Drasner See the Pen City Construction Site by Sarah Drasner (@sdras) on CodePen. GreenSock Cycle by Petr Tichy See the Pen GreenSock - staggerTo with cycle by GreenSock (@GreenSock) on CodePen. Special Thanks This major update is extra special as it contains features that were largely shaped by feature requests and feedback from our community. We really appreciate the strong community that we have in our forums that not only helps each other, but also helps shape the tools themselves. Extra special thanks to Elliot Geno for suggesting cycle and relative HSL tweening, Diaco for being a testing powerhouse, and everyone who voted on the API changes. Now go download GSAP 1.18.0 and make something beautiful.
  3. When it comes to animation, SVG and GSAP go together like peanut butter and jelly. Chocolate and strawberries. Bacon and...anything. SVG offers the sweet taste of tiny file size plus excellent browser support and the ability to scale graphics infinitely without degradation. They're perfect for building a rich, responsive UI (which includes animation, of course). However, just because every major browser offers excellent support for displaying SVG graphics doesn't mean that animating them is easy or consistent. Each browser has its own quirks and implementations of the SVG spec, causing quite a few challenges for animators. For example, some browsers don't support CSS animations on SVG elements. Some don't recognize CSS transforms (rotation, scale, etc.), and implementation of transform-origin is a mess. Don't worry, GSAP smooths out the rough spots and harmonizes behavior across browsers for you. There are quite a few unique features that GSAP offers specifically for SVG animators. Below we cover some of the things that GSAP does for you and then we have a list of other things to watch out for. This page is intended to be a go-to resource for anyone animating SVG with GSAP. Outline Challenges that GSAP solves for you Scale, rotate, skew, and move using 2D transforms Set the transformOrigin (the point around which rotation and scaling occur) Set transformOrigin without unsightly jumps Transform SVG elements around any point in the SVG canvas Animate SVG attributes like cx, cy, radius, width, etc. Use percentage-based x/y transforms Drag SVG elements (with accurate bounds and hit-testing) Move anything (DOM, SVG) along a path including autorotation, offset, looping, and more Animate SVG strokes Morph SVG paths with differing numbers of points Tips to Avoid Common Gotchas Limitations of SVG Browser support Inspiration Awesome SVG Resources Get Started Quickly with GSAP Challenges that GSAP solves for you GSAP does the best that it can to normalize browser issues and provide useful tools to make animate SVG as easy as it can be. Here are some of the challenges that using GSAP to animate SVG solves for you: Scale, rotate, skew, and move using 2D transforms When using GSAP, 2D transforms on SVG content work exactly like they do on any other DOM element. gsap.to("#gear", {duration: 1, x: 100, y: 100, scale: 0.5, rotation: 180, skewX: 45}); Since IE and Opera don't honor CSS transforms at all, GSAP applies these values via the SVG transform attribute like: <g id="gear" transform="matrix(0.5, 0, 0, 0.5, 100, 0)">...</g> When it comes to animating or even setting 2D transforms in IE, CSS simply is not an option. #gear { /* won't work in IE */ transform: translateX(100px) scale(0.5); } Very few JavaScript libraries take this into account, but GSAP handles this for you behind the scenes so you can get amazing results in IE with no extra hassles. Set the transformOrigin (the point around which rotation and scaling occur) Another unique GSAP feature: use the same syntax you would with normal DOM elements and get the same behavior. For example, to rotate an SVG <rect> that is 100px tall by 100px wide around its center you can do any of the following: gsap.to("rect", {duration: 1, rotation: 360, transformOrigin: "50% 50%"}); //percents gsap.to("rect", {duration: 1, rotation: 360, transformOrigin: "center center"}); //keywords gsap.to("rect", {duration: 1, rotation: 360, transformOrigin: "50px 50px"}); //pixels The demo below shows complete parity between DOM and SVG when setting transformOrigin to various values. We encourage you to test it in all major browsers and devices. With MorphSVG, you can Morph <path> data even if the number (and type) of points is completely different between the start and end shapes! Most other SVG shape morphing tools require that the number of points matches. Morph a <polyline> or <polygon> to a different set of points Convert and replace non-path SVG elements (like <circle>, <rect>, <ellipse>, <polygon>, <polyline>, and <line>) into identical <path>s using MorphSVGPlugin.convertToPath(). Optionally define a "shapeIndex" that controls how the points get mapped. This affects what the in-between state looks like during animation. Simply feed in selector text or an element (instead of passing in raw path data) and the plugin will grab the data it needs from there, making workflow easier. MorphSVGPlugin is a bonus plugin for Club GreenSock members (Shockingly Green and Business Green). Tips to Avoid Common Gotchas There are some things that GSAP can't solve for you. But hopefully this part of the article can help prepare you to avoid them ahead of time! Here are some things to keep in mind when creating and animating SVGs. Vector editor/SVG creation tips: When creating an SVG in Illustrator or Inkscape, create a rectangle the same size as your artboard for when you copy elements out of your vector editor and paste them into a code editor (how-to here). How to quickly reverse the direction of a path in Illustrator (Note: If the Path Direction buttons are not visible in the attributes panel, click the upper right menu of that panel and choose 'Show All'): Open path: Select the pen tool and click on the first point of your path and it will reverse the points. Closed path: Right click the path and make it a compound path, choose menu-window-attributes and then use the Reverse Path Direction buttons. If you're morphing between elements it might be useful to add extra points yourself to simpler shapes where necessary so that MorphSVG doesn't have to guess at where to add points. You can think of masks as clip-paths that allow for alpha as well. When using masks, it's often important to specify which units to use. Use a tool like SVGOMG (or this simpler tool) to minify your SVGs before using them in your projects. Code/animation-related tips: Always set transforms of elements with GSAP (not just CSS). There are quite a few browser bugs related to getting transform values of elements which GSAP can't fix or work around so you should always set the transform of elements with GSAP if you're going to animate that element with GSAP. Always use relative values when animating an SVG element. Using something like y: "+=100" allows you to change the SVG points while keeping the same animation effect as hard coding those values. You can fix some rendering issues (especially in Chrome) by adding a very slight rotation to your tween(s) like rotation: 0.01. If you're having performance issues with your issue, usually the issue is that you have too many elements or are using filters/masks too much. For more information, see this post focused on performance with SVGs. You might like injecting SVGs into your HTML instead of keeping it there directly. You can do this by using a tool like Gulp. You can easily convert between coordinate systems by using MotionPathPlugin's helper functions like .convertCoordinates(). Technique tips/resources: You can animate the viewBox attribute (demo)! You can animate (draw) a dashed line by following the technique outlined in this post. You can animate (draw) lines with varied widths by following the technique outlined in this post. You can animate (draw) handwriting effects by following the technique outlined in this post. You can create dynamic SVG elements! You can animate (draw) a "3D" SVG path. You can fake nested SVG elements (which will be available in SVG 2) by positioning the inner SVG with GSAP and scaling it (demo). You can fake 3D transforms (which will be available in SVG 2) in some cases by either Faking the transform that you need. For example sometimes rotationYs can be replaced by a scaleX instead. Applying the transform to a container instead. If you can limit the elements within the SVG to just the ones you want to transform, this is a great approach. For example, applying a rotationY to the <svg> or <div> containing a <path> instead of applying it to the <path> itself. Limitations of SVG The current SVG spec does not account for 3D transforms. Browser support is varied. Best to test thoroughly and have fallbacks in place. Most browsers don't GPU-accelerate SVG elements. GSAP can't change that. Browser support All SVG features in this article will work in IE9+ and all other major desktop and mobile browsers unless otherwise noted. If you find any cross-browser inconsistencies please don't hesitate to let us know in our support forums. Inspiration The Chris Gannon GSAP Animation collection is great for seeing more SVG animations made with GSAP. Be sure to also check out Chris Gannon's full portfolio on CodePen and follow him on Twitter for a steady influx of inspiration. Awesome SVG Resources SVG Tutorials - MotionTricks The SVG Animation Masterclass - Cassie Evans Understanding SVG Coordinate Systems and Transformations - Sara Soueidan Improving SVG Runtime Performance - Taylor Hunt SVG tips - Louis Hoebregts A Compendium of SVG Information - Chris Coyier Making SVGs Responsive with CSS - Sara Soueidan viewBox newsletter (SVG focus) - Cassie Evans and Louis Hoebregts Get Started Quickly with GSAP Below are a few resources that will get you up and running in no time: Getting Started Guide with Video Sequence Animations like a Pro (video) GSAP Documentation
  4. 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
  5. GreenSock

    GSAP 1.16.x Update

    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 constantly improving GSAP to solve the problems you face as a developer/designer. In the recent release of GSAP 1.16.0 and 1.16.1, Draggable got some big upgrades and SVG support has never been better across the whole platform. Here's a summary of what's most exciting in 1.16.x: Draggable gets "autoScroll" What happens if you're dragging an element inside a scrollable container (or page) and you reach the edge? Wouldn't it be nice if it automatically scrolled in that direction for you? Wouldn't it be even cooler if it applied variable-speed scrolling based on how close your mouse/touch is to the edge, and it handle MULTIPLE containers? Wish granted. Video tour Interactive demo See the Pen Draggable autoScroll by GreenSock (@GreenSock) on CodePen. Draggable's new getDirection() method Sometimes it's useful to know which direction an element is dragged (left | right | up | down | left-up | left-down | right-up | right-down), or maybe you'd like to know which direction it is compared to another element. That's precisely what getDirection() is for. Video tour Interactive demo See the Pen Draggable getDirection() by GreenSock (@GreenSock) on CodePen. Easier SVG animation with svgOrigin For SVG elements, CSSPlugin recognizes a new svgOrigin special property that works exactly like transformOrigin but it uses the SVG's global coordinate space instead of the element's local coordinate space. This can be very useful if, for example, you want to make a bunch of SVG elements rotate around a common point. So you can do TweenLite.to(svgElement, 1, {rotation:270, svgOrigin:"250 100"}) if you'd like to rotate svgElement as though its origin is at x:250, y:100 in the SVG canvas's global coordinates. It also records the value in a data-svg-origin attribute so that it can be parsed back in. So for SVG elements, you can choose whichever one fits your project better: transformOrigin or svgOrigin. Sara Soueidan used this feature in her excellent Circulus tool demo. Interactive demo See the Pen GSAP svgOrigin by GreenSock (@GreenSock) on CodePen. For more information about how GSAP has solved cross-browser SVG challenges, see https://css-tricks.com/svg-animation-on-css-transforms/ and for performance data, see https://css-tricks.com/weighing-svg-animation-techniques-benchmarks/. More Draggable improvements Draggable exposes a lockedAxis property so that you can find out whether it's "x" or "y" (assuming you set lockAxis:true in the config object). New onLockAxis callback that fires whenever the axis gets locked. Several performance optimizations were made to Draggable, particularly for transforms and scrolling. Draggable allows you to native touch-scroll in the opposite direction as Draggables that are limited to one axis. For example, a Draggable of type:"x" or "left" permit native touch-scrolling in the vertical direction, and type:"y" or "top" permit native horizontal touch-scrolling. SVG support is better than ever. It plots the rotational origin accurately, for example. Touch support has been improved as well. Bug fixes See the github changelogs for 1.16.0 and 1.16.1 for a complete list. Conclusion If you're already using GSAP and/or Draggable, we definitely recommend grabbing the latest version. If you haven't tried GSAP yet, what are you waiting for? Head over to the Getting Started article/video now and you'll be having fun in no time. Helpful links Getting Started with GSAP Draggable demo and main page Draggable docs GSAP docs Got questions? Visit the forums
  6. 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
  7. Hi, first of all i want to thank you for GSAP being awesome. Creating my site, i noticed strange behavior. I have complex animation, wchich goes forward/backward depending on wether element is clicked even or odd times. Everythings works pretty well exept for one part. I have svg stars empty inside with clipped rect to animate 'loading' the stars. While rest of animation works back and forth without any issues, here works well for the first time, then each consecutive time looks like there is one more animation interfering with the rest. It,s hard to explain it precisely, due to my limited english, however it's clear in the example i attached . Just click a few time and observe the effect. For demostration purposed, I removed all well-functioning parts of animation.
  8. Hi there, I've been enjoying making some animations with GreenSock today and I've run into a problem. I have a feeling that the solution is simple and that I am just missing it through sheer obliviousness. Perhaps you could point me in the right direction. I'm working with a compound path that I made in Illustrator and saved as SVG. My two paths are described using the d attribute, with one shown and the other {visibility: hidden}. I'm attempting to use the morphSVG plugin with TweenLite. I've tried: using the id name as a string "#hamburger" saving the element in a JavaScript variable and passing that in passing in the path string from the d attribute. None of these options is working for me! From the docs vs my code: TweenLite.to("#circle", 1, {morphSVG:"#hippo"}); // GSAP Docs TweenLite.to(hamburger, 1, {morphSVG: "#hamburger"}); // My Code When I try using a JavaScript variable, the console error is: invalid morphSVG tween value: [object SVGPathElement] When I use the id string, the console error is: invalid morphSVG tween value: #close When I use the path string, there's no console output. However, watching the containing div's classname, I can see that the code is being run. I thought the case might be because I was using compound paths instead of simple paths. I made a circle and star path in Illustrator and tried to use those instead. Same problem as far as I can tell. Well, if you could give it a try on the CodePen and offer a suggestion as to how I can address this I'd appreciate it. Thanks!
  9. Hello, I have implemented an animation with text shadows for my text using CSS, and would like to achieve the same effect on my SVG file. Basically what I need are two shadows with different colors moving away from eachother. I tried using SVG animations but then I found out about GSAP, which seems like a very good thing to know how to work with. But since I'm new to all of this I'm giving up after trying about 10 different things. You can pretty much see all the things I've tried commented out. Sorry if it's too much text but I wanted to make sure there'd be enough context. Thanks in advance.
  10. I'm having an issue with animating an HTML element nested inside an SVG with <foreignObject>. When the SVG is set to 100%, there's no problem, but when it's dimensions are scaled the <foreignObject> elements don't honour the resizing of the parent SVG when they're animated and act as if the SVG were set to 100%. Here you can see how it looks at 100%: And here's the Codepen: And here's how it looks when the SVG is set to Width: 50%: And the Codepen: Love to hear if there are any solutions to this? I'm aware that using the transform: scale on the SVG will solve this, but hoping to find a way to use SVG built-in resizing to save some work at implementing this. Thanks in advance, Lachlan
  11. Hi, I have created a minimalistic code pen to replicate the scenario CodePen. What I want to achieve is: Child (the cyan rows) should also be dragged along with the parent (greyed area) Child (the cyan rows) should be independently draggable within that grey area This works fine in Microsoft Edge and FireFox desktop browsers but doesn't work in Google Chrome
  12. Hi. I created a simple SVG witch is nothing more than a black rectangle that covers the screen and a transparent circle in the middle. Its purpose is to give the appearance of zooming in/out on the image behind it, thereby blocking out the image except for what is seen through the transparent circle. The above code works fine when I am scaling up, then down, in one motion. However, when I am only wanting to scale down, to draw the circle to the center of the screen, the code behaves in a hap-hazard way. The black rectangle scales improperly. I have tried different approaches, like using opacity zero when scaling-up, then switching to opacity 1 to show the effect, but the result is always the same. If you uncomment the line of js code, you'll see what I am getting. Please have a look at my pen (my first, owing to the demo you provided :0) Note: the pen that is embedded is not running correctly. But does so when I paste the url into the browser. https://codepen.io/don199/pen/wbdgQv
  13. Hi, there's a strange bug I've been coming across and not sure how to fix, it only happens very occasionally, but does always happen eventually if you keep refreshing. Seems like it's something to do with a wrong 'xPercent' calculation? I'm animating every svg elements y position from bottom to top, fine Then I am animating some elements to 'wiggle' their x and y positions. Sometimes the x axis seems to be wrong and they move much too far I originally thought the problem was because I was trying to animate the wiggle from the start, at the same time as moving everythings 'y' position. But I delayed any 'y' position animations until the first 'move up' animation was finished Funnily enough I can't seem to get the codepen to reproduce this bug... Making me think maybe it's network related, something trying to calculate before the svg is fully loaded...? Anyone seen something similar before, any idea what's going on? Is there a less troublesome way to achieve the same effect? I tried using 'x' instead of 'xPercent' but this made a jump in the animation and also xPercent is preferable as the image resizes a quite lot Thanks ?
  14. Hey all, I saw a lot of chatter on here that SVG G isn't necessarily supported but figured I would check -- I'm getting a really odd matrix transform for rotation on a SVG G elements. Seems like it's getting a translateX + translateY movement as well and swinging the animation strangely. Works perfectly for just SVG and I could rewrite to break out the g elements to separate SVGs (processor GULP!) but figured I'd check before I consider. The browsers we're supporting take in transform: rotate(90deg) correctly on SVG G and I could probably rewrite for CSS tweens as well but they're always a pain. Anyway, let me know eitherway! Thanks --- I didn't fork the broken codepen and now it's working as intended with the updates below.
  15. In the attached pen, the moving elements do not stay centered on the blue line. The triangle and balloon don't stay attached at their center origins at the "top" half of the blue circular line. They do align as intended on the bottom part of the line. Removing the xPercent/yPercent via the TweenLite.set does make them stay positioned closer to the blue line, but we want them to be centered the whole way around. Or, if you change the xPercent/yPercent to positive 50 instead of negative, it reverses the problem: the shapes attach correctly on the top half of the line, but not the bottom half. Any idea what is happening?
  16. Let me start by saying that I know this is a Chrome/Chromium issue. The CodePen works as expected in Firefox. Also, I know Blake has warned about using foreignObjects but I'm stuck with using them because, in my app, I have to use foreignObjects to render image layers to canvas creating a stack of PNG sequences inside a master SVG. I'm also forced to be able to support Chrome/Chromium. Here's the deal. I've run into a stacking context issue which I thought I had resolved before by doing something subtle to the SVG container using TweenMax to force the browser to do a redraw. Here, though, the issue is a little different. I have to allow my users to shift the order of each foreignObject which I accomplish using a javascript insertBefore. But, as you can see in the CodePen, if you shift the animated element to the back of the stack and then re-run the animation the browser is rendering it on TOP of the stack for as long as the animation is running. Then, once the animation is completed, the browser renders the element to the back of the stack where it belongs. Forcing a redraw like I've done in the past is not working. Any help would be greatly appreciated.
  17. So I've been getting to know the morphsvg and drawsvg plugins the last day or so, and my goal has ultimately been a curved arrow that animates as you see in the attached codepen. The issue I'm having now is that the line for this arrow should be dashed and I'm not sure what the problem is. There's a stroke-dasharray setting on the svg to begin with, but the drawsvg animation seems to override that. So I tried adding a strokeDasharray property to the tween itself but that seems to have no impact (first time using that and honestly not sure if I'm using it properly; couldn't find any documentation on it and only a couple codepen examples of it being used). I have a few, more drastic solutions in mind that seem very hacky to me so I'm hoping there's a clear approach here that I'm just unaware of. Also, if you disable the js and run the pen that will show what I am trying to get the line to look like.
  18. I'm trying my hand at animating SVGs with gsap and having a very rocky start. My ultimate goal is to be able to just animate an arrow to follow a specific path and to autorotate along the path (so that the tip of the arrow is always centered on the line). I figured an easy start to understanding this would be to take the gsap demo code and just make minor changes to it. In this case, I simply replaced the balloon path with an arrow tip and made sure the ids were matching in the js. The problem is that the arrow seems to be all over the place in regard to the line it's supposed to be following. I've tried some minor changes in the code (adding transforOrigin properties, changing the x and y percentages on the set method) but I feel like I'm sort of throwing darts here and not seeing any real progress. If anyone could clue me in as to what I'm missing here, that would be fantastic (hopefully this exposes a fundamental misunderstanding I have of SVGs and animating them).
  19. Dear GSAP comrades, Why do I get for some HOSTED DrawSVG animations from codepen 1 FPS when using CHROME on Mobile? They work fully FINE ON FF but just not on CHROME! How can this be? Only on Codepen it runs also well on mobile. Can someone solve me the riddle? Thanks for any suggestions, Mat
  20. Hi, I have an interesting(for me) issue I couldn't figure out. The code performs as I expect it to, setting the slider initial position depending on value of "current_value" variable, but only if I don't set the SVG Viewbox with Snap, on document ready. On the Code pen, you can remove that part at the beginning of $(document).ready and the slider sets the initial position correct. If the ViewBox is set, then the slider sets itself on some weird position I couldn't figure out. Mostly it goes out of bounds on the right, depending on the screen size. Try to view same code pen full screen. -> this I'm sorry if the codepen is messy, I tried clearing it out as much as I could. It is imperative for me to have the viewbox set, for resizing and centering the whole SVG. I feel like I need to tell Greensock that the view box has changed with Snap or something like that. Help? What did I miss? Thanks One below is working as expected, only this was removed on load ////remove below var svg = Snap('#svg'); svg.attr({ viewBox: "0 0 1280 720", width: "100%", height: "100%" }); //////////remove to here This one setting the initial position of the slider wrong:
  21. Hi! Trying to figure out morphing thing. I made a circle in Illustrator, turned it to the path, then I also made a blob from this circle (with the same 4 anchors). Now I am trying to morph `path` one in another and having this bugs: I am not sure why this happening? How to morph this 2 shapes (w\out using MorphSVG right now, I need to figure this out first).
  22. Inspect the codepen preview window to see the values on the svg. I've tried exporting from Illustrator and from Figma (using SVOMG), but no difference in the result. Anyone an idea how to fix this? the values: element.style { stroke-dashoffset: -1; stroke-dasharray: 1e-05px, 11px; }
  23. Hi, I am trying to use timelines to animate an svg element to slide to different points. When a button is clicked I need it to slide to a certain place on the x axis, then when another button is clicked, I need the element to slide from where it is to the x value associated with the next button pressed. If you know anything about guitar, I will put it this way: I want to display root notes (the red dots) and I need them to change position when a user clicks on the corresponding button. I have to do this for the 12 Major Keys. For example, the key of A starts on fret 5, so when the A button is clicked, the red dots should always move to that position no matter where it is. It is not so troublesome when only doing two keys but when there are multiple buttons, I'm not sure how to set it up. I'm sure I am way off....should I be using If Then conditions? Something else? Thanks for your help
  24. Hi there, I can't put any demo for example but i will try to explain as much as possible. I'm working on a "map" in SVG where i will have some interactive elements. In my interface, i make a button to zoom up and another to zoom down. I have limited the maximum and minimum zoom possible. Here my function that is making the zoom : TweenMax.fromTo(element, 0.3, { scale:previousScale }, { scale:currentScale, immediateRender:false, ease:ExpoScaleEase.config(previousScale, currentScale, Power0.easeNone), onUpdate:update}); This is in a function that determine the "previousScale" and "currentScale" to do the work. The update variable in my onUpdate paramater is : var update = function () { elementToMove[0].update(true); }; Where "elementToMove" is my draggable object that i have created. My problem : I'm not sure if it's because i have a lot of layers on my SVG, but when i'm zooming, it's lagging a lot. Anyway to keep my big SVG and zoom normaly, without lagging?
×