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.