Join Chris Converse for an in-depth discussion in this video Using individual files of the GSAP platform, part of Creating an HTML5 Banner Ad with GreenSock (GSAP).
- Throughout this course we've been using the full version…of the GreenSock Animation Platform.…The script up here is loading the TweenMax.min.js file.…This is the file that includes all of the functionality…from all of the plugins that we were talking about earlier.…Now this TweenMax file, if it's being served from a website,…and it's minified and gzipped,…will be as small as 29 kilobytes.…The non-gzipped version we're working with on our computers…is around 100 kilobytes.…Now, depending on what our animation needs to do,…instead of using the entire library,…we can use individual plugins.…
So, the project that we just built would require that we use…TweenLite, TimelineMax, the CSSPlugin and the EasePack.…If we use all of these four files together, this will…give us a file size download of about 25 kilobytes,…which is 19% smaller than the TweenMax file,…and all of these numbers are the gzipped versions as well.…Now, another thing to consider is this would increase…the number of JavaScript files from one to four,…
Author
Chris Converse
Released
7/20/2015In this course, Chris Converse shows how to combine GreenSock with HTML, CSS, and a sprite sheet graphic, to create a complete animated banner ad. He'll also introduce techniques for combining animations, rearranging elements, and jumping to specific points in the animation for testing. Plus, find out how to streamline your ad by serving just the files you need—reducing the file size and download speed.
The exercise files are free to all members. Download them and get started building your own project with GreenSock.
- Downloading GSAP
- Creating the ad layout, link, and constraint
- Adding the photos and text
- Animating the artwork
- Setting the ad to fade in on load
- Animating the letters of a headline
Skill Level Advanced
Duration
Views
-
Introduction
-
Introduction to this course1m 19s
-
Downloading GSAP2m 16s
-
-
1. Setting Up the Ad Layout with HTML and CSS
-
Adding the background clouds4m 17s
-
2. Animating the Ad with GSAP
-
Animating the surfboard3m 51s
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Using individual files of the GSAP platform