10

12,818

Moderators

10

1,738

Moderators

6

610

Moderators

5

1,411

## Popular Content

Showing content with the highest reputation on 02/10/2019 in all areas

1. 3 points

## walk animation

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!!
2. 2 points

3. 2 points

## Use css position in onUpdate callback

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?
4. 2 points

## circle rotation

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!!
5. 2 points

## Use css position in onUpdate callback

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!
6. 1 point

## TweenMax vs. TimelineMax in Ads - which is better?

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.
7. 1 point

## Tween direction

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.
8. 1 point

## circle rotation

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!
9. 1 point

## Tween direction

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!
10. 1 point

11. 1 point

12. 1 point

## How to get draggable dragging speed?

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
13. 1 point

## Move the clouds

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!
14. 1 point

## Close Overlay On Broswer Back Button

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
15. 1 point

## MorphSVG and Shape Index

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
16. 1 point

## MorphSVG and Shape Index

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
17. 1 point

## MorphSVG and Shape Index

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