1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Setup GreenSock as a Module with Parcel

    John LindquistJohn Lindquist
    greensockGreenSock

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss