Leaderboard

Hi Martin and welcome to the GreenSock forums. It is possible but not the easiest thing to do, not the hardest neither, so don't be discouraged. One of our superstars @Diaco came up with this sweet walking SVG animation: Is worth noticing though that His setup is far more complex than yours, so achieving something similar should come easier in your case. Unfortunately I'm far from being a Morph SVG expert (in fact I've never used that particular plugin in production just some simple tests), so I can't give you any specific directions on the subject, but start simple, first create a tween that flex the leg in one direction, then in the opposite direction and so on. Hopefully Diaco's pen will be enough to get you started. Happy Tweening!!

Hey SoupKing, I have a background on the ad industry and have worked on it for several years, not anymore, though so, take what I say with a pinch of salt. When I first read your post I took it as if you had confused the GSAP flavours and had them backwards but on re-reading, you seem to be saying that you can create the same animation from a complex timeline with less code than if using a timeline. Call me skeptic but I cannot imagine a situation. Yes, there are cases where a timeline is overkill, I have seen those. But, if we are talking about a 15 or 30 seconds ad, they they to have a few elements that have to wait until others are done with their show to come into place. The only thing that comes to mind when mulling over your comment is that either whoever created the examples you are talking about did a really, and I do mean REALLY, bad job. Or your brain is wired in a very different way (in no way it being wrong, just different). Do you think you can share an example where the timeline was too convoluted and a bunch of delayed tweens was a better option? I personaly was in the complete oposite to you. I would get ads created using only TweenMax and suddenly I would be asked to make one or another item move faster/slower... Boom, there would go my afternoon having to work out all delays for all the following delayed tweens for all of those units. I also can't see why you would have to change all the relative positioning ("-=") of the elements in a timeline because the client asked you to "loop it". If anything, using TimelineMax would be simply adding "repeat:2" to the Timeline's constructor (Or however many times the animation was to repeat). You got me curious to figure out how you would set your ads. Can you build a simple example? Then, I'd make recreate it myself and we could discuss the merits of each approach. Not in the sense of "let's see who does it better" but in a sense of "here's how I do it, let's get the best of both approaches". Ps: To me, the timeline is a way to group and sequence related tweens.

Aha, I see the issue. It's actually plotting things exactly where they should be, but if your container isn't exactly square, things will get "scrunched". It's just a logic thing. Imagine a circular clock, and cut it in half so you only see 9 O'clock through 3 O'clock. Now squish it vertically so that it's 1/4th as tall (but stays the same width). See how the angles to 10, 11, 1, and 2 O'clock all get weird? They're no longer equally-spaced. Simplify it further - imagine a 90-degree angle and then draw a line out to 45 degrees and plot the point on a circle. If your circle had a radius of 100, then the x and y coordinates of that 45-degree angle would be x:70.7, y:70.7. Now if we squish it in half vertically, the x coordinate DOESN'T CHANGE! So now y is 35.35 and x is 70.7 which is a very different angle to the center. See what I mean? There's no way to use percentage-based values to make this responsive the way you're asking for. It's logically impossible. You'd literally need to re-rerun calculations on every resize to plot the angles appropriately according to the new width/height ratios. Does that make sense?

In order to add to Shaun's great advice you could also use a bezier tween to achieve that: But be aware that the bezier solution is not responsive, since you would have to re-calculate every time a screen size change causes a position or dimension change in the element the circle is orbiting around. Shaun's solution is completely responsive though, so keep that in mind. Happy Tweening!!

Yeah, I definitely wouldn't do it that way. Are you wanting it to use top and left percentage values for responsiveness? If so, that's fine, but it won't be as performant as using x/y transforms. Anyway, there are a few ways to do this that I can think of: Create the same tween for each element (as it looks like you're doing), but pause it and then use another tween to tween its progress to whatever value you need. For example, if the middle one is 50% through the tween, animate the progress to 0.5. That way, you can use any easing you want. Do math. I'd visualize the center of rotation, draw a line outward to the element and imagine animating its rotation and plot the x/y coordinates (or percentages in this case) using Math.sin() and Math.cos(). You can put it in a container element and then counter-rotate the inner element the other direction to make it look like it's not rotating at all (almost like a carousel). This will let you get EXACTLY what you want. So you'd use GSAP to animate the rotation value(s). I hope that helps!

My absolute takeaway from this was that TweenMax and TimelineMax are swapped in @soupking post ? I can’t for the life me see how tweening separate elements with relative timings is easier with Tweens than Timelines. I mean, that’s exactly the use case for Timelines ... sequencing.

I would not animate the image width at all ... you'll get some horrible squeezing of the image itself. If what you're looking for is an overlay to tween from right to left to reveal an image, you can still use what I have shown above. Here is an example, Note, the swipe is right to left as you asked for in the first post (the example you provided is left to right). Principles all remain the same for either direction.

Hi @rakan and welcome to GSAP! Please see the CodePen below that shows you how this can be done. Note I'm rotating a parent of the circle because it makes it pretty easy to position the circle, size the parent and keep things consistent. There are other ways (using transform origin, for example), but I think this a simpler way to go. Hope this helps!

Hi @Emilek1337 and welcome to GSAP! Within the fromTo, your starting *from* a scale of 1.5 (and not tweening that property in the *to* so no change) and going *to* xPercent: 100. So, what you want is the from to start at xPercent: 100 and go to xPercent: 0. See the CodePen illustrating this. Hope this helps!

Fantastic. Well, I mean I'm glad we earned your trust but I'm bummed that there was so much you weren't aware of (that tells me we're not doing a great job of educating people). Do you mind me asking about some of the things you stumbled across that you didn't know about? And if you have recommendations for how to do a better job presenting the info, I'm all ears. Yep, there's a TEMPLATE_Plugin.js file in the plugins folder that lays it all out for you with comments. Hopefully it's relatively easy. I'm curious - what plugin would you make? Perhaps I've got something laying around that could help you. Is there a certain effect you're going for? What would your custom plugin do? Nope, we don't accept donations but I sure appreciate the thought. It's kinda funny - years ago (before Club GreenSock), several people kept pestering me about accepting donations and I was like "nah, it's okay, you don't have to feel obligated." and they INSISTED. I kept politely declining and saying I was just happy someone was using the code, but they started getting angry, like "Dude, we're a business and we're using your code for business-critical stuff; we don't feel right about this, and we WANT to give you money selfishly because it helps ensure that you keep supporting the tools." Ha. Shortly thereafter, Club GreenSock was born. The rest is history. Hopefully we'll see your name on the membership roster someday, but please don't feel any pressure. The vast majority of our users never pay us a dime. Good luck with your project. Let us know if you need anything else.

That's one of the things I'm most proud of about the community around GreenSock (especially these forums) - there's none of that arrogant critical "oh what a stupid question...I'm so much smarter than you" kind of stuff. Read through the threads here and I'm sure you'll see what I'm talking about. And to be honest, if I were looking into which animation library I'm gonna invest in for the long term, having a friendly community with a long track record of prompt, accurate answers would be a big factor. When you're wrestling with an animation with a deadline looming, that's HUGE. Again, I'm not going to criticize anime.js specifically, but I'll mention some of the things that I'd be looking at if I were in your shoes: Reliability - does it work around the many browser bugs and inconsistencies out there? We've put a ton of effort into normalizing behavior between browsers so you don't have to smash your head against the screen trying to solve all that stuff. For example, GSAP solves the transform-origin madness in SVGs. From my initial tests, it doesn't look like anime.js does things like that but perhaps I'm doing something wrong. There are countless other examples of inconsistencies that GSAP works around. Robust feature set - can it animate canvas, SVG, generic objects, etc.? Can it handle very complex sequencing? Morphing with mis-matched numbers of points? Bezier curves? Custom easing with unlimited points/segments? Basic physics? Can timelines be nested inside timelines infinitely? Is there a plugin system? Are there dev tools to make it easier during development? Most animation libraries have no trouble covering the basics, but when you've written a bunch of code on top of a certain tool and then you discover "crap! It can't do what I need..." on a more aggressive project, it's really frustrating. We typically hear from customers that when they discover a need, they poke around GSAP and find that it's already solved whatever they were facing. Like ExpoScaleEase. Details - we've been doing this a long time and there are a lot of details that often get missed (not that anime.js missed them...I don't know). For example, does it have seamless loops that don't allow time drift? (most animation libraries just restart when a tween completes in a way that allows time drifts and those can bite you in some cases). Does it avoid layout thrashing? Does it offer overwrite management? Lag smoothing? Does it power down its ticker when there are no animations running (to conserve battery life on mobile devices)? How does it do with dropped frames? I'd certainly recommend looking at this: https://greensock.com/gsap-1-12-0 (there are some demos that may be enlightening). Ubiquity - GSAP is the only robust animation library (that I'm aware of) that's whitelisted on every major ad network, meaning that its file size doesn't count against any ads that are served through those places. DoubleClick, Adwords, Sizmek, AOL, etc. That's a BIG deal to anyone in the advertising world. GSAP has been vetted by all the big companies. Its ubiquity also helps when you're looking to find talent; GSAP has been around for a long time and hundreds of thousands of people know its API. Support - in my 11+ years of doing this, I've seen countless animation libraries come and go. They seem so exciting when they first come out, or for the first year or two, but eventually the authors moves on and stop supporting them (at least most of the time). That's a real bummer for anyone relying on them. GSAP has a funding mechanism in place that has allowed us to build a crazy long track record of ongoing support. We have no plans of going anywhere. Again, none of those things were meant as knocks on anime.js - for all I know, it may do great in many of those categories. I only meant this list as a loose set of criteria I'd be looking at if I were in your shoes. I love hearing that! It makes all the hours I've put in (as well as others in the community) worthwhile. We really aim to make animators say "gosh, this is such a pleasure to use and it solve tricky problems for me..." Well, this next release has some big updates/additions to MorphSVGPlugin which is indeed a members-only benefit. But there are plenty of other things in the public files that I hope you'll love too. Again, we're aiming to launch next week so keep your eyes peeled. Does that answer your question? Anything else we can do?

Hi, Nice work on the demo. I don't know exactly how Chris finds the velocity and applies it but I suspect it's in here as it appears he is using the distance between 2 things to generate a value: modifiers:{ x: (x, target) => { liquidFollowerY += (this.bottle._gsTransform.x - this.liquidFollower.x) * 0.8; liquidFollowerY *= 0.7; return this.follower.x + liquidFollowerY; } } The official way to track velocity with GSAP is with.... VelocityTracker which is a bonus utility for Club GreenSock members (Shockingly and higher) https://greensock.com/docs/Utilities/VelocityTracker

There are few things to do to make something like this happen. Manipulate the DOM to make a duplicate of each image to allow each "cloud" to loop. This means creating a wrapping container, cloning the cloud image and appending it to the new parent wrapper. Some CSS to make sure the containing wrapper is twice the width of the cloud it's containing. Tween each cloud wrapper by 50% of its width and repeat that tween indefinitely. Set the duration of each such that the closer clouds move by quicker and each layer back is slower than the previous. Hope that helps!

Hi @Kamran, Depending on if you are using hashes ... this might get you going. All boils down to the onhashchange. https://stackoverflow.com/questions/25806608/how-to-detect-browser-back-button-event-cross-browser

Thanks! This is why I love cubic Beziers. The whole canvas thing is pretty is pretty awesome. I don't know what shocked me more. That it worked on my first attempt or that it looked exactly the same as the SVG. I can only imagine the type of the things that you could do using morphing with a powerful WebGL library like Pixi or Three. Now I need a method where I don't have to use an element as a proxy. @Celli The biggest problem people have with using the Bezier Plugin is that they can't visualize the path. This changes everything, and again is reason enough to become a club member. Check out Chris Gannon's creature using a motion path. Pretty awesome! http://codepen.io/chrisgannon/pen/qOawzL?editors=001 Here's the first motion path demo I made a couple of months ago. It's a little more complicated because it's using SVG and canvas. It's also responsive. http://codepen.io/osublake/pen/8e400cc14efe3cde1656728e0fb5e964?editors=001

The MorphSVG plugin is pretty freaking amazing and worth more than the price of a license. Morphing may be the star attraction of the plugin, but it also brings a new level of functionality to GSAP by giving users a fast way to access SVG path data. When I saw the plugin exposed a method for this, I immediately knew what this could be used for, motion paths. I'm sure this will evolve into something else with more functionality, but for now you can use the plugin to create the values for a motion path in one line of code. var values = MorphSVGPlugin.pathDataToBezier($("#path").attr("d")); Add those values to the bezier plugin, and in no time at all you can have Sonic the Hedgehog running through a loop... http://codepen.io/osublake/pen/OyBGyV And why should SVGs have all the fun? We have access to path data, so that means we can use those values with the canvas. All it takes is a couple lines of code to get a morph working with the canvas. Check out a canvas and SVG morph running side-by-side. Can you tell the difference? http://codepen.io/osublake/pen/RWeOWX

I've been playing around with trying to morph "S" shaped curves like your snake, and I'm not having much luck. Maintaining a continuous curve seems pretty hard to do using only morphing for that shape. I tried several different techniques, including converting the shape into a polygon, and the problem still persisted. If a polygon has the same problem as a Bezier curve, that means the problem will most likely not go away by adding more subdivisions. The morph is creating cusps on the path, which is a condition where the path will fold or reverse on itself. No matter how many subdivisions you add, the cusp will still be there. To fix a problem like that, the morph would need to use an adaptive technique to constantly change the number of subdivisions in a shape. Unfortunately, the morph plugin cannot do that because internally it has to use an equal number of points during a morph. I was thinking that you might be able to be able to create a more adaptive-like morph by using more than 1 shape. Instead of morphing from shape A to shape B, you could create keyframe shapes to morph to, A to B, C, D, etc. Maybe something like this... var morph = new TimelineMax({ paused: true }) .to("#path", 1, { morphSVG: "#morphA", ease: Power0.easeNone }) .to("#path", 1, { morphSVG: "#morphB", ease: Power0.easeNone }) .to("#path", 1, { morphSVG: "#morphC", ease: Power0.easeNone }) .to("#path", 1, { morphSVG: "#morphD", ease: Power0.easeNone }); TweenMax.to(morph, 2, { progress: 1 }); Even though adding more subdivisions doesn't seem to fix the problem for your particular case, I still made a demo to show how to do it. There's a lot of utility uses for subdividing, so other people might find this useful. It's pretty straightforward. Get. Convert. Subdivide. Convert. Set. // Get the path data var data = $("#path").attr("d"); // Convert data to bezier points var bezier = MorphSVGPlugin.pathDataToRawBezier(data)[0]; // Subdivide MorphSVGPlugin.subdivideRawBezier(bezier, 10); // Convert bezier back to path data var p = bezier; data = "M" + [p[0], p[1]]; for (var i = 2; i < p.length;) { data += "C" + [p[i++], p[i++], p[i++], p[i++], p[i++], p[i++]]; } // Set path data back on element $("#path").attr("d", data); The morph isn't horrible, but it could be better... http://codepen.io/osublake/pen/pjxLLb