OSUblake

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

I see. I actually made a game like that many years ago, although I didn't use GSAP. I would recommend checking out the docs for TweenMax. https://greensock.com/docs/TweenMax Here are some methods that you might find useful for this: TweenMax.getTweensOf() TweenMax.isTweening() TweenMax.killTweensOf()

What's the condition, and how often is it being checked? How would you stop an animation outside of a stagger? Same process. This returns an array of the animations in the stagger. var tweens = TweenMax.staggerTo(wordsElem, 10, { top: '100%' // yPercent: 100 }, 2); // this will kill the second animation tweens[1].kill();

At its core, GSAP doesn't do DOM manipulation. That's what the CSSPlugin does, so yes, you can use the easing functions for whatever you want. Every ease has a .getRatio() method, where you pass in a normalized value from 0 to 1. var ratio = Power1.easeIn.getRatio(0.5); Check out this post where I use different easings to plot points for sine waves. If you need help normalizing a value, here's a little helper function. Just pass in the current, min, and max values. // normalize will return a value between 0 and 1 function normalize(value, min, max) { return (value - min) / (max - min); }