Leaderboard

There infinite ways to animate between colors. This is one of my favorite graphics to illustrate that and it is just illustrating the RGB color space (pulled from this GraphicDesign.SE answer). Animating between HSL is different, as seen in the visualization of its color space (pulled from this page).

I'm not quite sure what should be happening here, but the cloud isn't moving because you have a lowercase 'c' on your tween target. // switch this cloudOne.to( "#cloud-1", 9, {transform:"translateX(94vw)"} ) cloudOne.to( "#cloud-1", 9, {transform:"translateX(0vw)"} ) // to this cloudOne.to( "#Cloud-1", 9, {transform:"translateX(94vw)"} ) cloudOne.to( "#Cloud-1", 9, {transform:"translateX(0vw)"} ) Does that help? Happy tweening.

I really don't recommend doing className tweens (and remember, a set() is just a zero-duration tween) because it literally must rip through every...single CSS property, compare the starting and ending values (before and after adding/removing the class) and find the differences and then animate them accordingly. It's just a lot of work. You could pre-render that stuff (do the work up front) by forcing the playhead on that timeline to the end and then back to the beginning, before you ever actually need to run it. Here's a fork that shows how: https://codepen.io/GreenSock/pen/fcb8f34ac3a3f1e5e54a5618a9019390 Oh, and just so you know, there's no need to wrap your targets in "$()" (jQuery) - you can just pass in the selector text and GSAP will use document.querySelectorAll() by default. Does that help at all?

It doesn't matter. If you're animating SVG, that's the bottleneck.

A few thoughts... If you want to have the rocket start at the bottom, you don't even need to mess with any of the bezier values - you could simply set the progress to 0.5 immediately (basically make the animation jump to its halfway-done position). Easy peasy Second, I'd be very careful about following Zach's non-GSAP approach because animating transforms on SVG elements (especially with transform-origin) can get odd results in various browsers, especially Firefox. Using GSAP ensures that you don't have to worry about all that garbage. See my CSS-Tricks article here: https://css-tricks.com/svg-animation-on-css-transforms/ I agree with @PointC that it'd be much easier if everything is in the same SVG file. But if you can't do that, here's another approach: https://codepen.io/GreenSock/pen/5cbf7b7e89dc30b03919387df42be69e?editors=0010 I noticed that the rocket SVG had some really strong transforms and the sizing was odd (to me at least), so I cleaned that up. I rotated that <g> inside the rocket, and then set the transform-origin of the <svg> to the center of the earth, and then just rotated it. No need for any bezier paths. I hope that helps. ?

I'd just like to point out — having all this in one SVG would make everything easier to control and scale. You can also use the MorphSVGPlugin.pathDataToBezier() method to make your orbit. Using a circle allows you to quickly change the radius to your liking. If you have symmetrical objects in the orbit, you can even change the scale to reverse the orbit direction. https://codepen.io/PointC/pen/wbyYwQ Just my two cents. Happy tweening.

If you play around with the parameters some you can get an effect closer to what I imagine you're looking for. Try this: waveSVG(path, {taperStart:0, loose:true, invertFlow:true, length:120, angle:10, magnitude:1, phase:1, duration:2, start:0, repeat:-1});

Oddly enough, I think it's actually doing precisely what it's supposed to be doing. Whenever GSAP senses an HSL value, it switches to animate in HSL so that it can keep those values "pure" (if you animate HSL values in an RGB way, it looks very different and is typically undesirable). But of course those animate around the color wheel differently (it's NOT just taking the red, green, and blue and animating those linearly). Again, this is all by design. Here's a demo that shows the HSL values and then their converted RGB counterparts: https://codepen.io/GreenSock/pen/67ccc31471f41af5a36d3a7b9d209a75?editors=0010 (Crack open the console to see). It's using ModifiersPlugin to just intercept things just before they're applied. See what's happening? The HSL values are indeed animating exactly as they should, and then the browser converts them back to RGB which is fine. Again, this is merely a side effect of how HSL values animate compared to RGB. Does that clear things up? If you don't want to animate things in HSL, you could convert them into RGB before feeding them into the tween. This page might be useful: https://css-tricks.com/converting-color-spaces-in-javascript/

In addition to the error that PointC points out, you could also remove the need for the second .to() statement if you use Timelinemax's yoyo parameter: let cloudOne = new TimelineMax({repeat:-1, yoyo:true}); cloudOne.to( "#Cloud-1", 9, {transform:"translateX(94vw)"}); You might want to also change the yoyoEase parameter as well.

Gotta be honest — I thought that sentence was gonna end with "we don't allow CSS animations around here." ? Since Zach has a shiny new GreeenSock Admin badge, it's probably time to dust off the chalkboard.

Anybody else see flickering? I seriously doubt this related to GSAP. Most likely a browser rendering issue. I bet you wouldn't see any problems using canvas. https://codepen.io/osublake/pen/vpEQzY

I think the most proper way to do it would be to use a vector editor, place the world and the rocket in the same SVG, create a path around the world (I noticed that the current world SVG mixes the outer circle and the inner continents, which is a hassle), and use GSAP's MorphSVG to move the rocket along the circular path. This is what PointC did below, but you can find a tutorial on how to do so yourself here: https://greensock.com/path-animation With that being said, if this is all you're doing and it doesn't need to be as responsive and you don't need more control over the animation, you don't need a JavaScript animation. You can just use a rotation with a transform origin outside of the rocket like my post on CSS-Tricks talks about. However, using this approach you need to fiddle with the numbers until it looks right, which can take time. Demo of this approach: https://codepen.io/ZachSaucier/pen/mYXQje?editors=0100

Hi @Lanceken, Welcome to the GreenSock Forums. I like your work. Here only as a stimulus a dynamic version. However, the fake behind which the missile might disappear is very complicated with a specific motive that is spinning. https://codepen.io/mikeK/pen/gyYWEe Happy tweening ... Mikel

Looks like setting start:0 and taperStart:0 improves things, right @mikel?

Hi Mikel Thank you for the warm welome Your example is a perfect example of what I am trying to achieve. Thanks!

So everything has to be inside in a html file? That's seems like a rather odd choice, but okay, I guess base64 might be your only option. That said, I don't see any flicker on the demo you linked to here. Where are exactly do you see flicker? And in what browser and operating system?

Good question. Under the hood staggerFrom (and most if not all selectors in GSAP) use .querySelectorAll when a text selector is given, which returns an array of HTML nodes. That's why the demo works on the documentation page. It turns out that React does let GSAP use that approach as well, which simplifies things a bit: https://codepen.io/ZachSaucier/pen/rgpPMj?editors=0010

No. A window load listener will if the images are in your markup. Another way is to add listeners to all your images and wait for all of them to finish. Not sure how base64 is a design requirement as that has nothing to do with design. And you don't have a single file. You have multiple files, and base64 has a size limit. Loading is one of many benefits. https://www.codeandweb.com/texturepacker An overlap isn't needed. Showing and hiding will happen in the same frame if done correctly. Here are a couple threads about sprite sheet animations:

Fact is: GreenSock is a very fast animation tool. See you ... Mikel

I don't notice any glitches, but maybe my machine is too fast. As for changing classes, you could use a callback to do something like that (in the callback, you'd apply the class yourself using vanilla javascript or jQuery or whatever). It'd be super simple to do if you only need to go forward, but if you need it to work in reverse as well, it's just a bit more tricky. Another option is to create your own plugin to do this sort of thing (a little more hassle up front, but then you just load it and you can reuse it as much as you want across all your animations).

man, such a silly mistake! thank you for the reply!

This seems to be working better... https://codepen.io/swampthang/pen/WBMWwM?editors=1010

That's what it looks like. Sometimes all of the images are hidden. Maybe try doing that without using stagger.

Hi @knalle, as @OSUblake said: 'That's something you wrote. ' Therefore identical!

That works Thanks! The waveSVG is a solution that works just as fine as Blake's demo. Is there any benefits in speed / CPU load compared to the other (blob) solution?

Yep. Odd it may seem, but I won't bore you with a long story. Flicker was occurring in IE, Edge, Chrome, and Safari - more pronounced as the files got bigger (more images). I am developing on an i10 with 64 gig RAM - less pronounced on it, more so on an iPhone for instance. In the end I just decided to go with setTimeouts and plain old JS - no more flicker. My own suspicion is that it had to do with the processor skipping a beat to tend to something else now and then - I can't prove it and there was no discernable pattern. Anyway, this works fine all things considered for this particular application. Thank you for all your help and follow-up.

Thanks a lot ZACH - sorry JACK. I should just play with the options ... https://codepen.io/mikeK/pen/ZNrRZK

Hi @ZachSaucier,, I´m interested also ... My fork of Jack's pen has a problem with the start/end point: https://codepen.io/mikeK/pen/xNYzVq Kind regards Mikel

Hey guys, I have a simple tween that changes the fill color of an SVG with a value that coming from a CMS system; the problem is that sometimes the returning value is an HSL color and it's causing some weird jumps. Is there a quick fix for this issue? Thanks in advance, Liad

Hi @najmu, Welcome to the GreenSock Forum. Please take a look at Get started ... If you have specific GreenSock-related questions, get in touch. And then open a new post please. Kind regards Mikel

Thank you for checking that out for me. Yes i did take out the bubble functions completely the publisher came back with the same thing. I think the tool is possibly testing things incorrectly i will try gain access to the tool and see.

I don't really have time to pull it all apart, but I don't see anything obviously "wrong". You might want to try removing the canvas stuff (just for testing), especially the globalCompositeOperation = 'lighter'. It also looke like you've got a bunch of calls to particleTwo() and some drawing stuff that might be slightly problematic (not sure). I'd be curious about removing your calls to drawTwo() just to see how that affects things.

Very weird. For some reason the red rgb value isn't tweening at the same rate as the green and blue values when using an hsl color value. This is something that @GreenSock will have to look into.

Just like to point out that using selectors may cause problems if you're not careful. See my post and demos at the end of this thread.

Hey Eric, If you console.log(this.card) you will see that it only points to the last element. staggerFrom requires an array of elements. As such, you need to change your React code to refer to an array of elements. I did that by changing 'this.card = null' to 'this.cards = []' and inside of each ref= I changed it to 'this.cards[x]' where x is the counter. There might be a better way of doing this in React, I'm very new to it. Demo here: https://codepen.io/ZachSaucier/pen/pmpqOM?editors=0010

Hey Iamattamai, This seems like it's an issue with the images loading to me, not an issue with GSAP. I'd recommend using a sprite sheet as Blake suggested. If you can't do that from some reason it might help to make sure the images have loaded.

Have you tried not using base64? I would recommend using a sprite sheet for something like that.

Oh my turn! my turn!! PS: Sorry couldn't resist

Hey fellow GreenSockers. I was going to post this in the SVG Gotchas thread, but this question is asked a lot around here so I thought maybe a new topic would be the way to go. SVG circles start at 3 o’clock and most people want to animate the stroke from the 12 o’clock position. Conventional wisdom would tell you to simply rotate the circle by -90 degrees and you’re all set, but there are some problems with this approach. Using GSAP to rotate the circle -90 degrees will work perfectly fine in Chrome and FF, but Safari will ignore that set() for some reason. (IE and Edge honor the rotation, but they have another problem.) You can simply add a transform attribute directly to the circle like <circle cx="500" cy="75" r="60" transform="rotate(-90 500 75)"/> This will work correctly in Chrome, FF and Safari, but not completely in IE and Edge. If you're animating the stroke with DrawSVG, IE and Edge need the stroke-dasharray set to 0 in the attributes or they will cause problems. If you don’t add that attribute, a regular circle will start at 9 o’clock and the circle that you’ve rotated -90 degrees with GSAP or a transform attribute will start at 6 o’clock. Strangely, if you resize the browser window to the point of the SVG changing size, IE and Edge will correct themselves. The only bulletproof way I see to draw a circle stroke from the 12 o’clock position with DrawSVG in all browsers is transforming the circle -90 degrees and adding the extra attributes to keep IE and Edge happy. <circle cx="500" cy="225" r="60" stroke-dashoffset="0" stroke-dasharray="0" transform="rotate(-90 500 225)"/> It appears that only adding the stroke-dasharray attribute fixes the IE/Edge issues, but I also add a stroke-dashoffset="0" attribute also just to be safe. Check out the demo in all your browsers. Hopefully this helps somebody with this type of animation. Happy tweening.

Haha! You've been poking around PointC's house of vectors. Here's another good one... http://codepen.io/osublake/pen/Bzamom This one would be too slow for an animation, but I use GSAP to set the transforms... http://codepen.io/osublake/pen/PZyymg When it comes to mouse drawing, SVG has it's limits as performance scales with the complexity of your shapes, but for simple stuff you should be ok. If you want all the bells and whistles, Paper.js is probably the best tool out there for a drawing library. It's even used as the renderer for an SVG editor, Boxy SVG. And you can mix canvas and svg together with no problem. Motion path - http://codepen.io/osublake/pen/XXbLer Morphing - http://codepen.io/osublake/pen/RWeOWX

Have you taken a look at Blake's Doodle Morpher Pen? http://codepen.io/osublake/pen/dYVNYd/ He's also got a cool Line Trails pen that may be of some help: http://codepen.io/osublake/pen/mEpado Happy tweening.

Have you ever wanted to bring the 3RD dimension into your project with the DrawSVG plugin? Using a series of masks we can simulate an SVG stroked path navigating around or through a subject in a photo. This path can be solid, dashed, dotted or whatever you like. My new demo uses some things from my post above about animating dashed strokes with masks, but goes a bit further. Get wrapped up in the swirling 3D lines of the DrawSVG plugin: http://codepen.io/PointC/full/ZWEqdK/ If you want to use this technique, here’s a bit of info: Start with the photo you’re using at the maximum size you think you’ll need. (Note: You can responsively swap to smaller versions as long as you maintain the same aspect ratio.) Create a new AI file the exact same size as you biggest photo. Import the photo for use as the background while designing your SVG. (Be sure to also create a plain rectangle that’s the same size as the SVG so everything lines up at export time) Draw the stroke that will be wrapping around/through the subject to your liking. Duplicate that path and make it #fff – this copy will be the mask. Unlike my earlier post where I mentioned making the mask path wider than the original, this time it needs to be the exact width as the underlying path. If it’s wider, you’ll inadvertently be showing extra parts of the original path at perpendicular intersections. (Note: making a duplicate path for a mask reveal is only necessary if you want to use dashed strokes. If you’re using solid strokes only, you can simply animate them directly with the DrawSVG plugin.) At all points where the stroke should be going behind the subject, draw a polygon over the subject with a color of #000. All these polys will be a part of your SVG mask along with the stroke mask that will animate. The polygons will be static but will scale perfectly. For my demo, I used three separate strokes to create a simple tube effect as it draws and you can see a bit of the perpendicular intersection reveal problem if you watch for it. It’s not too bad, but something to keep in mind. As mentioned above, if you’re using a solid stroke and don’t need dashes, no mask path will be necessary and this isn’t going to be an issue for you. You would just need your subject masking polygons. Finally, I put the image into a containing div and let the image drive the size of it. Place your SVG into the div with absolute positioning and a width of 100% so it can scale along with the image and containing div. All that’s left after that is to control the mask reveal and animate any changes in the stroke that you like. Note: the demo uses the DrawSVG plugin which is a Club GreenSock perk at the Simply Green membership level. I highly recommend it. Happy tweening everyone.

A quick tip for reversing path points in Adobe Illustrator. 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. (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')