OSUblake

In that quick setter demo, check out the calculations that use the speed variable. That makes it move like an exponential ease out. The speed variable is the same as the ease variable being used in this video.

Basically, every package you install is a tarball. That's what you download when you do something like npm install react or yarn add react. But yeah, you shouldn't mix npm and yarn installs. Just use yarn add ./gsap-bonus.tgz. Last time I did a yarn install, it wouldn't work unless I included the ./ in the path. And yarn should def be added to the installation page. ?

It's all done with svg. You can look at source code, but it's pretty advanced. https://codepen.io/GreenSock/pen/WQjRXE

I'm not sure an algorithm can be "incorrect". More like, can an algorithm be wrong for a given use? ? That said, I think gsap's current shuffle method is perfectly fine for its given use. I know the difference is only a couple of lines of code, which is pretty small, but I'd recommend keeping it as is. It's short, simple, and gets the job done. If someone has a problem with shuffle's sort bias, then I will kindly show them a better way, just like I did with some of gsap's random functions.

No. A unique shuffle might go into an infinite loop. Play around with this demo. It does wrap and wrapYoyo on a 0-5 range. Feel free to change those values. https://codepen.io/osublake/pen/5e504d79528f8087247d5bfa796efd34?editors=0010

quickSetter() can make a difference, but it's all in how you use it. Check out my quickSetter demo below. Notice how I do all the math calculations and style setting inside the ticker callback instead of the mousemove callback. That's key to making interactive animations smooth as event callbacks can fire multiple times before the next animations frame. Don't do the work until you need to. https://codepen.io/GreenSock/pen/WNNNBpo I didn't dig into your code, but your demo reminded me of something I made a while back. It's using an older version of gsap, but you might find some of the code useful. https://codepen.io/osublake/pen/qNPBpJ

If it can find the js files, then it should be able to find the definitions automatically. You can manually tell it where the definitions are in your tsconfig. { "compilerOptions": { ... }, "files": [ "node_modules/gsap/types/index.d.ts" ] } But I think there is still something wrong with some of your config files because it shouldn't be looking for a CSSRulePlugin.ts file. Rather, it should be looking for CSSRulePlugin.js. The only thing I can think of at the moment is that your moduleResolution isn't correct... or that you don't have gsap installed.

It sounds like something is wrong some of your config files because it says it cannot find CSSRulePlugin.ts. It should not be looking for files with a .ts extension as gsap modules have a .js extension. Another side note. Using the CSSRulePlugin is kind of an outdated technique as you can just use CSS variables. https://codepen.io/GreenSock/pen/PowWgOz

A demo that uses the InertiaPlugin. https://codepen.io/osublake/pen/7c4eae8dd686a125d631da761b164f2d

The format will be like this. var vx = tracker.get("x");

It now returns an array of trackers. Check out the first item in the array.

Callback params go inside an array.

GreenSockGlobals is still there, but I think it will still install everything as a global. It's more for using different versions of gsap on the same site. To get rid of all the globals, you can use modules and everything will be scoped to the module. https://codepen.io/osublake/pen/fac322113bc12c54959ea2cda1287b0f

And you don't need TweenLite, so there is no need to import it, nor would you ever need to register it. Registering is for plugins. This is correct syntax for gsap 3+. gsap.to(this.circles, { duration: 1, x: 100, y: 100 }); Of course you need to make sure this.circles is an element.

You should definitely uninstall those. Those types are not compatible with v3. It sounds like you might be using an old version of TypeScript, like here. That version should be fine, but maybe that version isn't being used to actually compile your code. Depending on your setup, you might need to install TypeScript globally. npm install -g typescript Don't do import * as anymore. That was needed a long time ago for older versions of TypeScript and GSAP. Always check the dates on forum posts. A lot of stuff has changed since v3 came out several months ago. Just import like Zach linked to here. https://greensock.com/docs/v3/Installation#esModules

For the record, here's more information about that. https://github.com/GoogleChrome/devtools-docs/blob/39512173473f4fd1cdaf0060a49dc3e85ffd4d75/docs/javascript-memory-profiling.md#proving-a-problem-exists Search for sawtooth on that page. There are like 3 occurrences. A sharp sawtooth curve might indicate a memory leak. One with a slight slope is expected, especially when using requestAnimationFrame, which is what gsap uses.

Creating noise is just like calling a random function. The difference is that values won't vary as much, resulting in a more natural look. It's great for generating stuff like waves or terrain. Just a random Codepen I found that uses noise to generate waves. https://codepen.io/soju22/pen/PLeLwo

That's the audio levels, but you can probably fake the values. Try searching for simplex and perlin noise. It can be used to create naturally random looking patterns.

Just use the TextPlugin. https://greensock.com/docs/v3/Plugins/TextPlugin gsap.to("#gsap", { duration: 1, ease: "none", text: { value: "0 1 2 3 4 5 6 7 8 9 10 11 12 13...", delimiter: " " } });

It's working correctly. I think your understanding of how animations work is a little off. An animation will update about every ~16.67ms, so the chances of it updating on every number change are practically 0. You would have better luck playing the lottery. To get it working like you want might take some work. You will need to make sure a number is not already in the array, and fill in any missing numbers between the last number in the array and the current number.

Hi @Karma Blackshaw If you need help, please make a demo.

The type needs to "cubic", and a cubic bezier needs a starting point. https://codepen.io/osublake/pen/f79dc245b16afad5b9710cebc8326d3c

Having a prng would complicate the random api a lot. Here's a good library for that. https://github.com/davidbau/seedrandom And some videos showing how to make your own.

I think the compiler is complaining about the conditional types, which is a feature that was added all the way back in version 2.8 (March 2018). https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html Try installing a newer version of TypeScript, to at least version 2.8. If you can't install a new version, then comment out random functions in the gsap-utitls.d.ts file.

Heck yeah!!!! I'd say it's better than a college degree. I learned more about programming from Keith Peters than I did from all my years in college. I can't thank thank that man enough for his work. ?