OSUblake

Yes, and that's a good thing. Keep it coming! Feedback like this is how gsap improves. I wasn't being critical of your idea, just critical of how to implement it. The PixiPlugin handles filters kind of like you want, but it works with a smaller set of filter functions than what is provided by CSS. https://codepen.io/GreenSock/pen/OgQJqV With CSS filters, there is a crazy amount of permutations. For example, you can combine css and svg filters. .div { filter: url(#svgFilter) blur(10px); } But the biggest problem I currently see with CSS filters is how Chrome incorrectly reports the color in drop shadow filters. But perhaps a "css filter plugin" could fix that issue.

Maybe @GreenSock can chime on this as he is the decision maker. I just think trying to do filters similar to the way gsap does transforms might be pretty hard.

You can do most filters just like you would in CSS. gsap.to(elem, { filter: "blur(10px)" }); The problem with my demo above is how Chrome reports the color value in drop shadows. It reports the color first, which messes up the string interpolation. drop-shadow(rgb(0,0,0) 0px 0px 0px)

Actually, I think the drop shadow isn't working correctly in my example above. I thought @GreenSock fixed the color problem in this thread.

To fully support everything would be nearly impossible because the order can change the final result. There isn't a "good" way to order the functions to always get a consistent result like there is with transforms. And using the same function more than once would be nearly impossible to create rules for. That's one of the reasons gsap can't do tweens that would result in a transform like this using x and rotation properties. transform: translateX(100px) rotate(45deg) translateX(300px); The order shouldn't matter much for that example, and it's easy enough to just use strings. gsap.to(elem, { filter: "drop-shadow(0px 0px 10px #000000) blur(10px)" }); https://codepen.io/osublake/pen/0f162c31802261419785e14320b6f8d6

Updating it yourself is probably the best option. You have to remember that the order a filter function is applied can change the result. What goes first, hue or drop shadow? gsap.to(elem, { hueRotate : 90, dropShadow : "16px 16px 10px blue" }); Changing the order will give you completely different results. https://codepen.io/osublake/pen/e487e067332729dbc229d85db9c336a9 And a filter function can be used more than once. filter: hue-rotate(90deg) drop-shadow(16px 16px 10px blue) hue-rotate(45deg); There is no way to specify that using an object syntax. gsap.to(elem, { hueRotate: 90, dropShadow: "16px 16px 10px blue", hueRoate: 45 // NOPE! });

@Carl I know you are trying to focus on the animation part in your lessons, but I think that function is a JS fundamental. Well, everything except the sort part as that is more advanced. But definitely the keys and map part. let myArray = Object.keys(obj).map(key => obj[key]); That's the same as doing Object.values. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values And according to your demo, you really don't even need the label names. You just need the times, right? So this might be much simpler for your use case. let labelsArray = Object.values(tl.labels).sort(); let index = 0; tl.tweenTo(labelsArray[index++]);

And you don't need to do that anymore. That's one issue using .registerPlugin() helps fix.

One day! Just waiting on React to stop dragging its feet. https://custom-elements-everywhere.com/ Dan gets grilled in the comments about that. https://dev.to/ben/why-the-react-community-is-missing-the-point-about-web-components-1ic3

If amount is 1 and duration is 1, that should be 2 seconds for everything. Adding those numbers should give you the total duration.

Use the amount property inside a stagger object. https://codepen.io/GreenSock/pen/vYBRPbO

gsap is not global when using modules. You need to import gsap inside every file.

Yeah, I think I had it somewhere in that section.

Strange. I thought I added a little line about using the dist folder for SSR on the installation page, but I don't see it anymore. ?‍♂️

That's because a lot of frameworks like that don't support es-modules out of the box, so you might have been importing 2 different types of modules. Frameworks like that are stuck in the early in the 2010s, but to be fair, this is partly because they do server side rendering (SSR), and es-modules aren't supported in older versions of node. next.js, nuxt.js... same difference. Probably not. That line of code really only matters when you do a production build, so the minifier doesn't drop it (tree shaking).

React has nothing to do with importing. Most likely something to do with your build tool config, like webpack. Or you were loading your app bundle before the plugin, so the react code was executing first. Def not a fan of mixing modules like that, using the import and require syntax. That could result in importing 2 different types of modules. Did you try just importing the plugin? You can put that file inside gsap's node_modules folder. import DrawSVGPlugin from "gsap/DrawSVGPlugin"; const plugins = [DrawSVGPlugin];

Why wouldn't it be? If you can build it, GSAP can make it move. You can use getBoundingClientRect. https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect And combine that with a FLIP technique to animate the words spreading apart. https://codepen.io/GreenSock/pen/oNveWXv The line animation can be done by animating the scaleX of a line from 0 to 1. Kind of like here when you focus on an input element. https://codepen.io/osublake/pen/rQwwjj I don't think that animation will work well on mobile as there isn't enough room to put all the words on one line.

Maybe. Using a css object used to be required, but that changed many years ago. You can, although it doesn't look like you are changing the opacity of the bait, so maybe just a set before your fromTo. this.animation = this.timeline .set(this.lure, { opacity: 1, y: -5 }, 0) .fromTo(...)

You've changed properties on the lure, like scale, and opacity. You need to reset those if you want to see it again. It's also better to animate x and y instead of left and top. This is kind of pointless considering you just replaced the timeline with a new one. reset() { this.timeline = gsap.timeline(); this.timeline.time(0); // <= redundant }, And you don't need to wrap css properties inside a css object. .fromTo( [this.lure, this.bait], 1.3, { left: e.pageX, top: e.pageY - 200, scale: 0, visibility: "hidden" }, { ease: "elastic.inOut(1, 0.75)", left: e.pageX - 25, // 25: Half of lure's width top: e.pageY, scale: 1, visibility: "visible" }, 0 )

z-index: 99999; Why so high? A value of 1 will work just fine. You just need to set the CSS position property. https://css-tricks.com/almanac/properties/z/z-index/

I figured you saw that as you liked my first post. But yeah, the best stuff is almost always towards the end of a thread as the solution gets more refined.

It really shouldn't matter if you are including the plugin in a script tag. You can double check to make sure it's loaded by logging this out before you use it. console.log(window.com.greensock.plugins); If it's loaded and you still can't get it to work, perhaps you are using the plugin incorrectly. Make sure you are targeting an svg element that has a stroke on it.

You also don't need to keep creating the same custom ease over and over again. Just create it once. However, I don't think that will fix the problem you are seeing. If I delay calling init by a second, that totem thingy doesn't even move in. There is something else going on in your demo, but I don't know what. https://codepen.io/osublake/pen/68be956824c1815bb73a545d34884170

Ok, here is how to workaround the missing definition for now. Create a .d.ts file in your project, like typings.d.ts. Then add the following code to that file. It should resolve that error for you. declare namespace gsap { function quickSetter(target: TweenTarget, property: string, unit?: string): (value: any) => void; } We'll make sure that the next release of gsap will include the quickSetter definition.

Hi @enisq Thanks for pointing this. You are correct, the quickSetter definition is missing. Standby while I come up with a temporary workaround. Also note that import "gsap" won't work correctly in v3 once you do a production build. You will need to specify what to import, like: import { gsap } from "gsap"; https://greensock.com/docs/v3/Installation#modules