Search the Community

Showing results for tags 'svg'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 / JS
    • GSAP
    • Banner Animation
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)


  • HTML5 / JS
    • Public
    • "Simply Green" Package
    • "Shockingly Green" Package
    • "Business Green" Package
  • Flash
    • AS3
    • AS2

Found 362 results

  1. Hello, This it's my first try with GSAP and I'd need your help to understand how should I think to solve the animation process. I want to achieve Violet water drop falls down on black background Then letters start animating - For extra effect I would break "V" letter into two paths so both lines they can get animated simultaneous. My problems: My main problem is how to control timing and control visitability of these paths or groups via js How can I hide cyan letters on the beginning and start with letters animation when the water drop falls into place? In load animation part: TweenMax.from (".Vletters", 0.6, {drawSVG:"0%"}, {drawSVG:"100%"}, 2); It seams I cant add delay parameter into the function like: TweenMax.from (".Vletters", 0.6, {drawSVG:"0%"}, {drawSVG:"100%", delay:"2"}, 2); In on click function I don't understand why violet drop isn't animating. If possible I would first have Violet water drop falls V letter gets animated then this animation is taken to the next left and right letters so that whole "logo" is reveald.
  2. Need a little help...

    I have a lot of SVG stars that i'm trying to animate. The first time it looks very nice, up to the part where it repeats. It starts at the original position but I would love to make it look like stars are raining from the left to the right infinite times, any tips? I have added a Codepen URL
  3. Tween to svg object

    How do I get an svg object to go to the position of another one? I have been banging my head against a wall. Trying to get pink to follow draggable green. Any help would be great
  4. I am trying to create a minimap for a little game. First i started creating a full map in SVG, and then animated the player icon alongside the path. But is it possible to reverse the behaviour, so that the player icon stays, and the path itself, is animating, moving and rotating anchored to the player icon? Just like the image below. Any help is highly appreciated. current code: motionPath = MorphSVGPlugin.pathDataToBezier('#motion-path', {align:'#player-dot'}); TweenLite.set('#player-dot', {xPercent:-50, yPercent:-50});'#player-dot', 2, { bezier:{values:motionPath, type:'cubic'}, ease: Power0.easeNone });
  5. Drag along an svg path

    The circle move along the path with animation in this example. But how to do that with draggable plugin, drag the circle along the path.
  6. Oooops ...

    Hi, To be honest, I just wanted to try different easings and a countdown. But with a little story it was really funny ... Kind regards Mikel By the way: GSDevTools is very helpful. I noticed, however, that in reverse, the centering of the object (pathDataToBezier) is not interpreted expected. Is that due to my coding?
  7. Path comparison with MorphSVGPlugin?

    First, I want to say thanks for all the hard work put into the greensock tools. It's fantastic. It might be a stretch, but I was wondering if the MorphSVGPlugin might have some method for calculating the difference between 2 svg paths. Essentially, I want to calculate how closely 2 shapes match. Say for example I have a 200x200 square, 300x200 rectangle, and 300x300 star. Comparing the square and rectangle would return a higher accuracy value than comparing the square and star, since the square and rectangle paths match more closely, so to speak. Currently, im just comparing the area of the shapes, but it can only get me so far and I feel a path comparison would be more accurate. Perhaps there are methods in the precompiler that I can utilize? Any way to measure the total offset of the path after it morphs? Any pointers are much appreciated!
  8. Stagger groups of paths

    Hi guys, I'm trying to stagger groups of paths. I have 4 groups, that I want to simultaneously start drawing but stagger the paths inside of each group with 0.5s. Currently, I'm just writing it 4 times starting them at the same label, and repeating the same tween code. Is there a way to shorten the code so I don't repeat it 4 times? If I add elements into the array, the timing is off. I could also write a function and pass the elements, but would it start at the same time? Is there a keyword maybe in tweenmax stagger feature for this? Thank you! const tl = new TimelineMax(); tl .staggerFromTo( '[id^=top-left] path[id^=top-left]', 2, { drawSVG: "100% 100%" }, { drawSVG: "0% 100%", onComplete: leafGrow }, 0.5, "draw-Level1-Vines" ) .staggerFromTo( '[id^=top-right] path[id^=top-right]', 2, { drawSVG: "100% 100%" }, { drawSVG: "0% 100%", onComplete: leafGrow }, 0.5, "draw-Level1-Vines" ) .staggerFromTo( '[id^=bottom-left] path[id^=bottom-left]', 2, { drawSVG: "100% 100%" }, { drawSVG: "0% 100%", onComplete: leafGrow }, 0.5, "draw-Level1-Vines" ) .staggerFromTo( '[id^=bottom-right] path[id^=bottom-right]', 2, { drawSVG: "100% 100%" }, { drawSVG: "0% 100%", onComplete: leafGrow }, 0.5, "draw-Level1-Vines" )
  9. Hello, I've got a litle problem when trying to change/set the rotation of a svg on Apple devices. As you can see in the codepen I've set the rotation of `#progress` to -90 which should set the starting point at the top. Somehow the Apple devices don't seem to respect the rotation because it jumps right back to the default value when I try to change with the code below. var tl = new TimelineMax();'#progress', 1, { rotation: -180 }); I've got this reproducable on: - macOs Sierra 10.2.6 using Safari 11.0.2, Chrome is working fine here - iPhone 8 & iPhone6 using Safari & Chrome - iPad 3 using Safari & chome Everything works fine in Windows and Ubuntu. Hope you can help me out
  10. Happy new year ...

    Hello dear friends, Kind regards Mikel
  11. Hello! Today had some fun animating a lot of stuff, one of them was "typewriter effect" - the thing is it's SVG and it's in perspective, so I thought this can be faked with some Stepped ease and pathDataToBezier, there are 7 letters so I eyeballed a path for separator did some heavy math (lol) and thought it will work. It almost does. That's my final a bit clunky effect And that's the "clean" version But the question is why the stagger for #keyword > path does not start at the same time as the #separator? It looks like there's some "blank timeline space". I encountered this problem few times and I would love to know what I'm doing wrong here - any suggestion will be much appreciated. Thanks !
  12. Christmas ...

    Hello dear friends, No doubt Christmas is coming ... Hi @Jonathan - sorry, when I saw your new portrait, I just felt the need to redecorate my tree to dedicate it to the GreenSock community. I coded my first Christmas tree inspired by the work of Petr Tichy (here) Dec 2015. It was one of my first exercises. Kind regards Mikel
  13. Over 400 svg elements performance

    Hello, I made a little animation with gsap, and i really like how easy it is. But while it look great on y computer (gtx 1080), my coworker has heavy performance issues (imac 2007). Be both use the same browser (chrome), and he has better performances with last firefox build. I saw some people switching to canvas/paperjs, but i look like painfull. I'd like to know if the performance issue is about the number of animated elements (~432) or the way i build the timelinemax (in loop). Here is the pen : Thanks
  14. IE problems

    Hi I'm working on this robot animation (see Codepen) all was going swimmingly until it was pointed out to me some odd behaviours that were occurring in IE Edge. I'm having no luck debugging this and wondered if anyone could shed any light? Any help would be appreciated. Also frustrating, but something i'll probably work out eventually, on the second loop through (the second time the German box is picked up) the rotation of all the boxes is not right, i'm not sure why this is? Lastly, this is by far the most complicated timeline I have have attempted and i'm sure there are better/more efficient ways of achieving the same outcome. I'm always keen to learn so if there are any obvious GSAP features different structures I should be taking advantage of i'd appreciate the input. Many thanks in advance.
  15. Hi, fellow GreenSock (forum) members. I'm stuck with animating an object over path, more like generally how to center say rectangle or any path to move smoothly on a path with autorotating. The Codepen pen is a part from what I would like to do but can't center the green "car" e.g. so that its center (midpoint X and Y or centroid if you wish) would move on the path. This year I have created complex animation of a cube moving along the "infinite" path with calculating shadows per rotation angle - with callback function - yet cannot do this simple animation well. Gray path is a rectangle, red one is nearly completed rounded rectangle with Bezier curves. The latter would be perfect but I cannot script the green rectangle to be centered on path at all times. So in general how to draw, position and/or offset an object so that it will move along the path by its center (centroid)? Having a group with invisible rectangle boundaries and then animating a group along the path? And yes, I have watched the excellent Note: I'm using svg.js for some easy creation of SVG elements. Intention is to script all to have rule base path creation and then animating objects over paths. Sure, the path rounded corners will be redone with arc commands :-).
  16. Clip-path and mousemove effect

    Hi guys! As you can see in my codepen i've applied a clip-path to a group that is holding a gradient circle element, which will in turn mimic a kind of reveal. My main question is do you guys know why or how I can have the element completely follow the mouse within the surrounding box? At the moment it seems as if the transform on that certain element is working in relation to the viewbox. Do you guys know how I can work around this or approach it differently? Thank you so much, Oliver
  17. Morph Curved Shape into Straight Rectangle

    I just started trying to work with the MorphSVG plugin and feeling like I must be missing something. Not working out quite as simply as expected. I have a basic S curve type shape that I want to animate into a straight edged rectangle. I'd like it to just smoothly iron out the curves until it goes straight but when I try this out it does a weird flip animation from one shape to the other. I'm exporting my SVG paths from Adobe Illustrator since it gives me a lot of control over how the path is drawn but I don't work with SVG much so this might be part of the problem. Any help to push me in the right direction to achieve this is greatly appreciated!
  18. ScrollMagic GSAP SVG Mask Bug

    I am using ScrollMagic with the GSAP Plugin. I am trying to reveal a line based on an animated mask that should sync to the scroll. This demo works on Desktop but not on iOS: I am not sure if this is an ios, svg, scrollmagic or gsap bug. Any help is appreciated!
  19. Hi everyone, I recently made an animation which recently had quite good feedback from the codepen community ( ). I too feel like there is something very cool in this animation but the perf are really bad on mobile. I don't blame GSAP for that it's pretty amazing already to be able to have such result with that few lines ! But now i want to be able to use this kind of animation in a real website but with that impact on perf it's not imaginable. I don't think i can improve the perf significantly with SVG only, if i animate less stroke, the result won't be as cool. So i'm currently looking to an alternative to have the same animation but with improved perfs ! After some research i'm starting to think that animating inside a canvas is my best option. I feel like PixiJS could be a good option with some tricks, maybe threeJS too. I saw @OSUblake pen in which we can see that he is using GSAP morphing inside the canvas and the perf are just incredible compared to mine. You can see for yourself here. So if any of you know if it's possible to have my animation inside a canvas and with what method i could try to make it better i'd be thankful for some guidelines. Alaric
  20. Ink transition with gsap

    Hi guys, I want to know if its possible to achieve animation like this with morphSVG? (see the link below) Im trying to wrap my head around how to achieve this and I liked to know how you guys would approach an effect like this.
  21. For some clarification: Sorry didnt translite the id's to english. rood1 = circle2 rood2= circle2 lijn1 = the line i want to animate and reveal the part slowly.
  22. I came across this on CodePen last week and I've been digging around to better understand it ever since. Not getting very far very fast. I'm new to GSAP and SVG (which may be 90% of the problem) and what I'm trying to figure out is what's going on behind the drawable connections. If not a tutorial, just a quick pseudo-code summary of how this is implemented might be enough.
  23. Animate SVG <g> group

    Hey guys, so i am wondering how i can animate my svg? It is only the second time i am doing this only this time it wont work. If i place in the css for instance : opacity:0; this will work. When i use .from opacity or autoAlpha:0 nothing happens. I also used transform origin in the inline style, that also works. What is wrong? Also no console errors in the browser. Would like to animate them so they look like a bar graph Thanks allot in advance
  24. I'm very new to GSAP, so apologies if this is a simple question, but I couldn't seem to find the answer anywhere. As you see in the codepen, I'm trying to animate this gold bar across the screen (and fade it in/out) in three tweens. However, between each tween in the timeline is a distinct pause for a quick moment before the next tween begins. I tried firing the tweens before the others finished, but that seemed to break the animation when it repeated. How do I make this animation one continuous motion and allow it to be repeated indefinitely? Here is my js right now: var $loader = $('#load'), tl; tl = new TimelineMax({repeat: -1}); tl.from($loader, 1, {x: '-=40%', transformOrigin:"0% 50%" , autoAlpha: 0, scaleX: .2, ease:Power2.linear}) .to($loader, 1, {x: '+=60%', ease:Power2.linear}) .to($loader, .8, {x: '+=10%',autoAlpha: 0, scaleX: .2, transformOrigin:"100% 50%" , ease:Power2.linear});
  25. Lucky wheel

    Hi! I would like to make a lucky wheel (something like this) and I am in trouble with the indicator at the topright corner. I've 12 sectors on the wheel and the indicator sholuld move when the little sticks are under it. The problem is the wheels easing and the triggering. Can someone help me?