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

Categories

  • FAQ

Categories

  • Examples
  • Showcase

Categories

  • Products
  • Plugins

Categories

  • Learning Center
  • Blog

Categories

  • ScrollTrigger Demos

Categories

  • CodePen Challenges

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

  1. 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
  2. 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
  3. 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}); tl.to('#player-dot', 2, { bezier:{values:motionPath, type:'cubic'}, ease: Power0.easeNone });
  4. 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.
  5. mikel

    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?
  6. 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!
  7. 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" )
  8. 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(); tl.to('#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
  9. mikel

    Happy new year ...

    Hello dear friends, Kind regards Mikel
  10. 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 !
  11. mikel

    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
  12. 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 : https://codepen.io/kaliel/full/XVbGvY/ Thanks
  13. OODNX

    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.
  14. 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 :-).
  15. 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
  16. 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!
  17. 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: https://codepen.io/paul-siteway/full/aVGwEw/ I am not sure if this is an ios, svg, scrollmagic or gsap bug. Any help is appreciated!
  18. Hi everyone, I recently made an animation which recently had quite good feedback from the codepen community (https://codepen.io/alaricweb/pen/vWxPyp ). 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
  19. Hi guys, I want to know if its possible to achieve animation like this with morphSVG? (see the link below) https://giphy.com/gifs/3o6fJ1O72KpIh4YRLa. 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.
  20. 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.
  21. 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.
  22. 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
  23. 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});
  24. szsoma

    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?
  25. Hello, what plugin should I use to mimic the functionality of this codepen: If someone could also showcase how to animate the SVG Path with a GSAP plugin, I would be grateful. Thanks.
×