Lessons: 25Length: 3.1 hours
- Overview
- Transcript
1.1 Introduction
Welcome to “3 GreenSock Projects: Practical Animation With GSAP”. In this course, we’re going to walk through the build process of three real-world projects, learning practical animation along the way. The projects include an animated preloader, an SVG logo animation, and a custom content slider.
1.Introduction
1.1Introduction00:44
1.2GSAP Refresher09:09
2.Project 1: Animated Preloader
2.1The Starter File07:48
2.2Creating a Timeline11:48
2.3Bouncing Circles13:08
2.4Animating the Shadows04:12
2.5Loading Images10:50
2.6Preloading Multiple Images08:48
2.7Animating the Preloader Off12:55
2.8Revealing the Main Content05:28
3.Project 2: SVG Animated Logo
3.1Examining the Logo03:44
3.2Setting Up the Styles04:29
3.3Randomizing Position and Opacity07:29
3.4Animating the Dots06:38
3.5Animating Paths With jQuery DrawSVG06:28
3.6Finishing Touches03:01
4.Project 3: GSAP Image Slider
4.1Getting Started05:21
4.2A Note on Slide Positioning04:59
4.3Setting Up Some Variables08:56
4.4Placing the Slides05:08
4.5On Deck12:24
4.6Setting Up the Animation Array09:53
4.7Setting Up the Animations11:36
4.8Creating the Button Events08:37
5.Conclusion
5.1Final Thoughts00:46
1.1 Introduction
Hello and welcome to three GreenSock projects practical animation with GSAP. My name is Craig Campbell and I will be your instructor for this course. Now in this course we're going to create three practical animated projects using the GreenSock animation platform in JavaScript. And I'm assuming for this course that you have a solid foundation in HTML and CSS and a pretty decent understanding of JavaScript. Now in this course we're going to create an animated preloader for your website and SVG logo animation and an animated slideshow. So, we've got a lot of ground to cover and we'll get started in the next lesson. Thank you for watching and I'll see you then.
