OSUblake

Best framework advice ever!!! Start simple, then scale up. I haven't heard of that law before, but I love it! +1

Are you literally trying to remove the ease from memory? You can do this: CustomEase.create("myEase", "M0,0 C0,0 0.056,0.442 0.175,0.442 0.294,0.442 0.332,0 0.332,0 0.332,0 0.414,1 0.671,1 0.991,1 1,0 1,0"); delete Ease.map.myEase; But that's pretty much pointless. The performance of your app will improve 0.000000000%. Even if you have 10,000 different custom eases in memory, the performance difference will be negligible. When it comes to profiling animations, the main things you should be mindful of are rendering and painting times in the performance tab.

First, don't create a custom ease inside an animation. Do it like this: // Create your custom ease CustomEase.create("myEase", "M0,0,C0.126,0.382,0.282,0.674,0.44,0.822,0.632,1.002,0.818,1.001,1,1"); // Use the ID you gave your custom ease TweenLite.to(foo, 1, { ease: "myEase", x: 100 }); TweenLite.to(bar, 1, { ease: "myEase", x: 200 }); Sure. Just re-create an ease with the same ID. // myEase #1 CustomEase.create("myEase", "M0,0,C0.126,0.382,0.282,0.674,0.44,0.822,0.632,1.002,0.818,1.001,1,1"); // myEase #2 CustomEase.create("myEase", "M0,0,C0,0,1,1,1,1"); // These will use myEase #2 TweenLite.to(foo, 1, { ease: "myEase", x: 100 }); TweenLite.to(bar, 1, { ease: "myEase", x: 200 });

Yep, that's exactly why I brought it up. If this post hadn't come up, I was still going to ask. Now is the time to make breaking changes.

Yes, but it's very choppy because it can't animate the in-between values. To animate font weight using font-variation-settings, which can fill in the in-between values, you have to use a compatible font. Here's a good place to find some. https://v-fonts.com

You can't animate font weight the way you want. This post does a good of explaining why. https://stackoverflow.com/a/16629941/2760155

Well that's the problem. Your CSS transform transitions are conflicting with GSAP JavaScript animations. Get rid of that addClass/removeClass stuff and replace it with GSAP animations, and you should be good. BTW. There is no need to wrap stuff in a css object. TweenLite.to($circle, 0.3, { x: e.clientX, y: e.clientY });

Not without a lot of work. @GreenSock what do you think about adding gestures to the next version of Draggable, to be more like hammer.js? http://hammerjs.github.io/ hammer.js is an awesome library, but it's really not maintained anymore, so GSAP could fill that void.

And switch it to use x and y like in my demo. I don't use left and top anywhere.

Yes, that would be helpful. I was having trouble installing boilermaker last night. It doesn't seem to like windows environments. And include a spec too.

I think that issue is related to the environment, which is designed for mobile games. I'm not familiar with the environment in that issue, but I've used several like it in the past, and DOM functionality is very limited. You're basically limited to canvas support. Do you know what browsers are causing this error. A quick search brought up this issue for Servo, which is an experimental browser. https://github.com/servo/servo/issues/14779

Ok. I'll try to test that out later today. Do I need to setup databases and OAuth for it to run?

Yes.

You might be able to import from a CDN in your test like this: import { TimelineMax } from "https://unpkg.com/gsap@2.1.3/all.js?module"; Or maybe, like this: import { TimelineMax } from "https://unpkg.com/gsap@2.1.3/all.js"; Really not sure how webpack will treat those. You may need to link to the umd versions. Those are coming from the unpkg cdn. https://unpkg.com/ https://unpkg.com/browse/gsap@2.1.3/

What version of webpack are you using? v4 has problems mixing es modules with umd. v3 doesn't. Also, have you tried using require() instead of import for the umd? If you go back to using es modules, try letting babel transpile gsap in your node_modules folder. See if this post is any help. _gsTweenID is added to every object/element it animates. The only way I can see that error happening is if what you're trying to animate isn't an object, but a primitive like a string or number. Setting up build environments can be a real PITA sometimes. Have you considered using something pre-made, like Create React App? https://github.com/facebook/create-react-app