Setup GreenSock as a Module with Parcel
Modern development requires modern tooling. Rather than adding GreenSock as a script to an HTML page, we're going to install GreenSock using Yarn and set up our development environment using Parcel. This will allow us to quickly iterate and test out our animation ideas. GreenSock is abbreviated as gsap when importing.
Instructor: [00:00] We'll start with installing the Parcel Bundler, so add this as a dev dependency. Then in my package.json I can define a script. Call this dev and say parcel index.html. Create that index.html with the default template exclamation point then tab.
[00:22] Down in the body, we'll say "Hello" and run that script, yarn dev, and open this here and here. You can see "Hello" coming from our server.
[00:35] We'll stop the server real quick and create a script tag of index.js, create that file, index.js. Now we can restart the server. Right now, there's nothing. If I do document.body.innerHTML an H1 tag of "Hi," we'll see that show up.
[00:59] From here, I can import from GSAP. I'll import TweenMax. When I hit save, you'll see Parcel installs it for me. In my HTML file, I'm going to create an H1, say "Hi" here. Then I can say TweenMax2, use a selector to find the H1, set the duration for 1 second, and set the props to 100.
[01:28] Hit save here, and you'll see "Hi" slide across the screen. Refresh, and there it goes again.
problem is, webpack still holds a massive % of users compared to parcel, so I would have hoped this should of showed how to set it up for webpack too.
Mr. Lindquist, Your voice is so similar to Dave Ceddia's. Even your cadence is similar. This means at least 2 things. 1. My ear is sensitive to voices. 2. I'm a dev online class junkie. Thanks for the good lessons.
Hey John! Could you tell us how you got your vscode setting to get the "script" tab opening automatically on a new line - When you started to edit the package.json ?
I wouldn't change a thing. What is missing from online courses is the combination of Modern JS with the Greensock examples. I appreciate combining Parcel with this; that was very slick. I don't use Parcel too much but you know it will always work, vs other toolsets that are evolving. I appreciated the steady increase in complexity; I've been using Greensock on the occasional projects and this course inspired me to add click events. I look forward to new courses given by John. This experience has inspired me to give a similar talk to a regional WordCamp. I think theme developers like me will eat this up!
It's honestly surprising how simple bundling can be without webpack.