OSUblake

It's not just about groups. But groups are you friend. It this what you are trying to do? https://codepen.io/osublake/pen/f3d85f267b74cd5d65915accb5397b4e

After thinking about it, that probably won't work for text unless it's converted to a path.

I think the docs are incorrect there. @GreenSock can check me on that. That should say that it only applies the HTML elements. SVG elements are have a default origin of 0 0. Rotation is hard to get from a matrix because it's really scale and skew. That's why you should use gsap to set transforms so it can keep track of stuff like rotation. You don't need to worry about matrices. Transforms and transform origin don't work the same in every browser. That's what gsap fixes. Check out this article. https://css-tricks.com/svg-animation-on-css-transforms/ GSAP uses matrices for SVG, the problem is interpreting what the initial values for each component are supposed to be, like scale and rotation. It is best to remove transforms on elements that you plan to animate with gsap. Check out this SO question about ways to remove transforms. https://stackoverflow.com/q/13329125/2760155

This already exists. gsap.to("h1", { duration: 5, color: "red", ease: "power4.in", onUpdate: function() { console.log(this.ratio); } });

If you want to control a timeline, then you need to add animations to the timeline. Right now your timeline is empty. var tl = gsap.timeline({ paused: true }) .to("#rect", { opacity: 0, duration: 3, ease: "back", repeat: -1 });

You have the params in the wrong order, and doing it like that will cause the time to drift the longer it runs. This way will give you consistent timing. gsap.to({}, { repeat: -1, duration: 1, onRepeat: myFunc });

No. I just looked at your zip file, and it looks like you are trying to replay the scrollIndicationAnimation timeline. That obviously won't work because the original elements aren't inside the page anymore. You would have to create a new timeline to target the new elements.

I think Safari is the only browser that is capped to 60fps. https://bugs.webkit.org/show_bug.cgi?id=173434 https://github.com/whatwg/meta/issues/158 I can, but the difference isn't as noticeable as the difference between like 30 and 60.

Here's an example of scaling an svg to fill the screen. The path data is based on a 100 x 100 area. The key to getting it to scale asymmetrically is with the preserveAspectRatio="none" attribute on the <svg> element. Click anywhere to run the animation. https://codepen.io/osublake/pen/BYwgBg Taken from this thread.

Ha. Yeah, both posts were edited. The second post about using the MorphSVGPlugin's path filter, which you really don't need to use anymore as you can define a function for canvas rendering. https://codepen.io/GreenSock/pen/WYWZab

Tweens don't know anything about what is draggable, so you would have to do that yourself. You can use getBoundingClientRect(). Run that on both elements to determine if the draggable is out bounds. If it is, then animate it back in bounds. https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

Just define path data. You can scale geometry. If you created path data for a 1000 x 1000 area, and now you need to it fit a 400 x 600, you would scale the path down using these values. var scaleX = 400 / 1000; var scaleY = 600 / 1000; Depending on the medium, you might have to scale every coordinate in the path. point.x *= scaleX; point.y *= scaleY;

Ha. I didn't realize that either. So the only thing missing is the array part, which can be done using one of the functions above.

Then maybe it should just be added to the list of helper functions. The code in v2 seems pretty straightforward. https://github.com/greensock/GSAP/blob/86b54d1c70237daeb754f6be8b5d9ee4f4c9cbe2/src/esm/TimelineMax.js#L400 p.getLabelAfter = function(time) { if (!time) if (time !== 0) { //faster than isNan() time = this._time; } var labels = this.getLabelsArray(), l = labels.length, i; for (i = 0; i < l; i++) { if (labels[i].time > time) { return labels[i].name; } } return null; }; p.getLabelBefore = function(time) { if (time == null) { time = this._time; } var labels = this.getLabelsArray(), i = labels.length; while (--i > -1) { if (labels[i].time < time) { return labels[i].name; } } return null; }; p.getLabelsArray = function() { var a = [], cnt = 0, p; for (p in this._labels) { a[cnt++] = { time: this._labels[p], name: p }; } a.sort(function(a, b) { return a.time - b.time; }); return a; };

Thanks. It's been updated.

Yes, "onInterrupt" isn't in there, which is why your intellisense can't find it. https://github.com/greensock/GSAP/blob/d05746483fd6c7fef1e15d56ef980f17f03d6be8/types/gsap-core.d.ts#L21 I've mostly been going off docs to write the definitions, so if the docs are incorrect, then the definitions might be too. That said, I don't know what onInterrupt is valid for. Is it just for tweens, or timelines and tweens. Maybe @GreenSock can fill me on that.

I get it. Like I said, the plugin isn't go away. I just always push back on IE questions because every client says they want IE support. Why would a client not want to support it? That could limit their exposure.

Yeah, I know you are trying to make it approachable, and that's hard because people want to jump right into the cool stuff. All I can say is that the majority of questions on this forum usually aren't GSAP questions at all. They mostly seem to be general JavaScript questions. It's only been around for a couple of years, so a lot of people don't know about it. In your demo it does, but having a labels object also has it pros. For example, it is much easier to get and set values in an object because you don't need to use an array index to find the label. //get var time = tl.labels.myLabel // set tl.labels.myLabel = 4;

And if you're a Browns fan for life, that must mean you're from Ohio. Me too... I do miss my OSU!

Haha. I wasn't going to bring that up, but I feel your pain. Once upon a time I did stuff for the federal gov because I thought it would be an easy gig. Long story short, I quit after a couple of weeks. After getting out of the army, that was too many rules and regulations for me to handle. ? If you make a simple demo (codepen, stackbltiz, codesandbox, etc), I can take a look... and other members might jump in like @Rodrigo. ? There's nothing wrong with posting generalized questions here, it just might be harder to get a good answer for a question that is not related to gsap.

Well, this really isn't gsap question, but I have lots of thoughts on this. Stop trying to support IE. It's dead... unless you are working on a banking app for South Koreans. If you must support IE, then I would just put the click handler on the <SVG> element itself... or whatever svg element you are trying to target. Based off the code you provided above, there is no reason to even use an <a> element.

As @ZachSaucier said, using the MorphSVGPlugin is a good option. Definitely the easiest solution in my opinion. But you can always do it the old fashioned way using math. https://codepen.io/osublake/pen/vdzjyg

The CSSRulePlugin won't be phased out any time soon. Using CSS variables is just a suggestion. However, IE was phased out years ago. And animating CSS variables won't cause an error in IE, so why are you even worried about IE? Nobody uses IE except for South Koreans, and that's only because it's the law for their banking apps. An old article, but the Active X situation remains. https://www.zdnet.com/article/south-koreans-use-internet-explorer-its-the-law/ If South Korean e-commerce is your target market, then supporting IE might be worth the effort. If a client wants you to support IE only because they want to support everything, then I would charge them an "IE tax". I usually double the price of the project if they want full IE support. They always change their mind, and that saves me some headaches.

Very nice! Former game developer here, and I can tell you that using boxes for hit detection is perfectly fine, which is what Draggrable does. Pixel perfect hit detection is rarely needed, and it can become very complicated. It can also slow your game down! https://codepen.io/osublake/pen/40b18190c60161960d8d12ff4fa71d1d https://codepen.io/osublake/pen/bb6983d03e1c3582f9aac486ab9069f8 I didn't see where you are using the throwprops plugin in your code. Anyways, the ThrowPropsPlugin has been replaced with the InertiaPlugin. Not too much difference. Just a slightly different API. https://greensock.com/docs/v3/Plugins/InertiaPlugin

Nothing wrong with that. I do like how React has helped move front end development forward. But at the same time, I also hate how devs focus too much on React. React is not the be-all and end-all. Yesterday it was jQuery, today it is React, what's it going to be tomorrow? I don't know, but I do know something that will never change, and that is the DOM. Learn the DOM and maybe some canvas, and current year technology shouldn't matter too much. In the end, it will all be JavaScript (not including wasm). I'm hoping that one of these days we might be able to focus on standard components, just like @Rodrigo brought up.