OSUblake

Check how many times a wheel event fires. It's not like a click event. Also, it's better to use y or yPercent instead of top.

They definitely work together, but canvas is not easy to learn if you've never done graphics programming before. And animating strokes probably won't be much faster in canvas either. 169 snake animations is going to be taxing with any medium. You're probably better off rethinking your animation.

100vh might not be what you think in mobile. https://github.com/bokand/URLBarSizing

To speed stuff up, you can keep stuff out your main bundle, like with a lazy component. https://reactjs.org/docs/code-splitting.html#reactlazy But I don't know if that will work with Gatsby. Might need to look at loadable components. https://github.com/gregberge/loadable-components

Yeah, it was probably from a previous version. Depending on your setup, it might have been importing umd from "gsap/dist/gsap" even though you had "gsap. But I don't think you mentioned your setup. If you are doing SSR, then you need to register by checking if the window exists, or inside useEffect or componentDidMount.

Gatsby's documention. https://www.gatsbyjs.org/docs/debugging-html-builds/ So you either have to check. if (typeof window !== "undefined") { gsap.registerPlugin(...) } Or you have to put registerPlugin stuff in useEffect or componentDidMount. Also, you might need to do this temp work around.

That's what adding the transpile part to nuxt.config.js solves.

Why do you keep changing this? import { Draggable } from "gsap/dist/Draggable"; This is what I posted. import { Draggable } from 'gsap/Draggable.js';

Add this to the build section in your nuxt.config.js build: { transpile: [ "gsap" ] } Import like this if you're using spa mode. import { gsap } from 'gsap'; import { Draggable } from 'gsap/Draggable.js'; gsap.registerPlugin(Draggable); Import like this if you're using universal mode. import { gsap } from "gsap"; import { Draggable } from "gsap/Draggable"; if (process.client) { gsap.registerPlugin(Draggable); } You don't need to import eases. They are strings now. https://greensock.com/docs/v3/Eases

That means your environment doesn't support es modules. You can try umd modules. import { gsap } from "gsap/dist/gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); Also, you don't need to import the CSSPlugin. Where did you get that from? Need to stop incorrect information from spreading.

Transpile the modules. If you have nuxt set to universal mode (SSR), then you'll need to register any plugins client side. import { gsap } from "gsap"; import { Draggable } from "gsap/Draggable"; if (process.client) { gsap.registerPlugin(Draggable); }

Hard to say without a demo. I'd start by cleaning up that for loop code. There's no need to have the calculateStartPosition function and the forEach calls inside of a for loop.

I actually like watching the code being typed, even if it makes the video longer. I just hate it when the coding happens too fast, and you miss what was typed. I guess that's what I really like about Scrimba, you can edit the teacher's code.

I was going to post that one, but the "snake" effect is so cool. https://codepen.io/osublake/pen/vKoXwW

So funny how many times I find some of my code on stackoverflow. I have a pretty low reputation on there. Can't even bust the 1,000 rep mark. https://stackoverflow.com/users/2760155/blake-bowen

This demo needs to be referenced somewhere on this site. ?

Nice tutorials! Made me think of Scrimba. Ever heard it? https://scrimba.com/ I just came across it a couple of weeks ago and was blown away. It's combines video with a live code editor. The video and code are kept in sync, and you can edit the edit the code to see changes. I think some gsap courses on Scrimba would be freaking amazing. cc @Carl

It is a "core" plugin, so with the other plugins.

Somewhere in my private pens. https://codepen.io/osublake/pen/bfafda9d056dbc126333b67dfdbd12b7

Yeah.

There's a built-in plugin for that, endArray. var arr = [1, 2, 3]; gsap.to(arr, { endArray: [5, 6, 7], onUpdate() { console.log(arr) } });

You can't import from a script tag. Just register the plugin. https://codesandbox.io/s/x-ion-gmbh-logo-po9q2?file=/src/Logo.js You should probably read up on the migration guide. You're using lots of deprecated syntax. Duration goes inside the vars object now. Stagger is a property. And eases are just strings. No need to import them. tl.to( streak, { duration: 0.01, opacity: 0, ease: "back", stagger: -0.02 } );

That functionality has always been there. When you do something like npm install react, all it's doing is downloading a .tgz from npm's servers. https://docs.npmjs.com/cli/install

You can use split-ease for that. https://split-ease.js.org/

Yeah, it's a member plugin, so it won't show up in the package if you haven't paid for it.