Leaderboard

Don't let it scroll. Set its position to fixed. And it would be better to animate x and y Instead left and top. You should also be careful with your CSS transitions. Using all can cause a lot of problems.

I see. That does sound simple... but then I looked at the docs. It's rather confusing. You have to animate the graphics command that drew the rectangle.

Ah. I think putting the paths in one SVG and being able to animate the viewbox will solve the problem! I'll play with this. Thank you.

Hi @omarel, sure, here one example of @PointC - he has a lot of svg stuff! Best regards Mikel

Yeah, I think you might be misunderstanding how morphing works. Basically it takes the path data (the stuff in the "d" attribute of a <path>) and interpolates between two values. Well, that's an oversimplification because it does a ton of stuff under the hood to make that happen in an intuitive way. It does not alter the fill color or other attributes as well, but of course you could animate those too (separately) if you want. But morphing is about the shape itself, and it honors whatever coordinates you feed in. So in your example, you've got a completely different <svg> element that's elsewhere in the DOM, and the <polygon> in there that's your end shape (the rectangle) has certain coordinates baked into the shape itself - those are what are being used when morphing the "O" shape. It would definitely be simplest if you just put both shapes into the same <svg> element so that they share a coordinate system. If you can't do that, it makes things much, much more complicated. You'd have to do a bunch of conversions between coordinate systems (and remember, each could have transforms applied) and edit all of the coordinates in the shape accordingly. Possible? Sure. Easy? Nope, not for most developers. I guess you could also animate the <svg> so that it sits on top of the other one and stretches to match coordinate systems, but even that isn't exactly simple. Is there any reason you can't have both shapes in the same <svg> element?

Your wish is my command, @OSUblake. I implemented it exactly as you requested, including activeCursor. I didn't make grab/grabbing the default, though, because I'm a bit worried it'd prompt backlash from current users who rely on the "move" cursor. In other words, that'd sorta be a "breaking change" (well, if you could call the cursor change "breaking") and I'm not sure this warrants it. Ya think? Oh, and apparently grab/grabbing aren't supported in some browsers like IE and iOS Safari as well as some others. But you can totally do cursor:"grab", activeCursor:"grabbing". Or even cursor:false. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js

a little more info on the subject:

hi and welcome to the GreenSock forums. tween.totalProgress(1) will force the tween to complete. Did you try it and get unexpected results? If you need something else, please feel free to provide a demo http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

Hi @omarel, As Jack explains: morph only means morph from one to another shape. But you can build, vary, control all the other steps (position, rotation, size, timing ...) very easily. Yes, if you like, gradually morph into multiple levels (different shapes). It depends on how it should look like. Here is a little suggestion ... Happy tweening ... Mikel

If you're working on Draggable, I was wondering if you could implement this feature request that I totally forgot about. A grab cursor that changes to grabbing when pressed should be the default. https://greensock.com/forums/topic/15705-draggable-improvements-snapping-and-position-properties/?tab=comments#comment-76829

I'm not familiar with Animate CC, but I can take a pretty good guess. Some objects might not have a width or height property that you can change. For example, you can't change the actual dimensions of an image. To change its size, you would have to transform it i.e. scale it. If you know the initial dimensions of the object, then it's very easy to calculate. scaleX = desiredWidth / initialWidth; scaleY = desiredHeight / initialHeight;

Yeah, it does seem pretty odd to have position:fixed nested like that, but I think I've got a workaround in place that'll still allow that to work regardless of the nesting. Again, try this preview (uncompressed) of the upcoming release: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js Better?

Just in case anyone reads this and wants to go a little deeper, I have a related question from a few weeks ago, similar use case:

I'm pretty sure there's something that can do whatever you're referring to. Searching for "web animation" tools isn't going to get you very far. When I hear the term web animations, I think of animating DOM elements. Nothing too fancy. In fact, I think most would probably consider CSS animations to be web animations. The tools you're looking for will be related to motion design and game development. The output can usually be exported as JSON, which can be consumed by JavaScript. From there, you just need some type of runtime to parse that JSON data and convert it into an animation. You could make your own, but there is probably one that already exists. I'd be willing to bet that a lot of the TV animations you're referring to are done in Adobe After Effects, which can be played using something like Lottie (bodymovin). And then you have Spine, which is used for a lot skeletal animations. Check out the demos page. http://esotericsoftware.com/spine-demos

Hi @marcelf and welcome to the GreenSock Forum! Like @OSUblake advised nesting fixed elements is not good. But sometimes you have to work around existing bad markup and styles from a CMS or template you didn't build. But there is good news since you can work around such things with just some minor tweaks to your CSS. You can fix this by adding the following CSS. .wrapper_relative { position: static; } .wrapper_relative > .wrapper_relative { position: relative; } The position: static makes sure that the top parent is in the flow of the document. And allows its first child has position: relative so your nested fixed element can be positioned relative to its first parent to allow the knob to rotate properly. Happy Tweening