All prices in USD
Learn how to build interactive storytelling websites from scratch using ScrollMagic and GreenSock.
Are you ready to take your ScrollMagic and GreenSock animation skills to the next level?
Simply login to my site and look for the upgrade option in the store.
If you can not find it, get in touch.
This online course will teach you how to build more advanced scrolling animations and cool effects using the power of ScrollMagic and GreenSock.
The course is perfect for beginners, but even if you are a pro you will learn heaps about ScrollMagic, GreenSock, advanced CSS layouts and creative scrolling animations.
You will be able to follow me step-by-step and get up to speed with ScrollMagic API very quickly.
All that you need to be a part of this online course is some basic knowledge of CSS, HTML and jQuery.
I am confident that after going through this course, you will be able to create something on your own, something unique and very creative.
If you really want to stun your boss or your clients with some creative hand-coded animations, sign up now to get started.
While you have my 100% money-back guarantee, there is nothing to lose.
|Crossreveal Sections – Table Of Content|
|Learn how to cross-reveal sections. (railsware.com/web/)|
|Lesson 1 – 8:55||How To Use setPin|
|Lesson 2 – 9:08||How To Use CSS3 Clip Property|
|Lesson 3 – 6:17||How To Pin and Overlap Multiple Sections|
|Pen Reveal Effect – Table Of Content|
|Learn how to reveal parts of a product one by one. (fiftythree.com/pencil)|
|Lesson 1 – 8:29||HTML, CSS – Layout and PSD Overview|
|Lesson 2 – 12:55||Reveal Top Parts|
|Lesson 3 – 7:33||Reset Position Before Animation|
|Lesson 4 – 7:18||Reveal Bottom Part|
|Lesson 5 – 11:10||Reveal Remaining Parts|
|Awwwards Onepager – Table Of Content|
|Learn how to create an interactive scrolling website. (ihatetomatoes.net/awwwards)|
|Lesson 1 – 19:24||HTML, CSS|
|Lesson 2 – 12:58||HTML, CSS Layout|
|Lesson 3 – 12:46||HTML, CSS Nav|
|Lesson 4 – 09:52||HTML, scrolling container|
|Lesson 5 – 10:27||Navigation Timeline|
|Lesson 6 – 12:23||Trigger Animation when scrolling down|
|Lesson 7 – 06:00||Trigger Animation when scrolling down|
|Lesson 8 – 06:20||Setup CrossFade Animation|
|Lesson 9 – 19:39||Page Load Animation|
|Lesson 10 – 15:11||CrossFade Animation|
|Lesson 11 – 12:34||CrossFade Animation Continue|
|Lesson 12 – 11:02||CrossFade Animation Continue|
|Lesson 13 – 17:13||SVG Animation|
|Lesson 14 – 05:18||ScrambledText|
|Lesson 15 – 06:25||Fine Tuning Slide One|
|Lesson 16 – 05:56||Turning Animations Off|
|Lesson 17 – 02:00||Final|
|Lesson 18 – 11:30||Bonus – Navigation Click|
- a combination of advanced HTML and CSS layout with more complex scrolling animations
- clean workflow, without any headaches
- advanced ScrollMagic scenes with callback functions
- advanced GreenSock animations and interactions
- triggering a different tweens and timelines based on a scrolling direction
What’s not covered?
- mobile implementation (I recommend turning scrolling animations off for mobile and touch devices)
- designers and developers with a working knowledge of HTML and CSS
- curious front-end developers trying to learn what's hot and boost their skill set
- designers who would love to build their own scrolling animations
- anyone looking for a more advanced ScrollMagic tutorials
- anyone who ever tried to use ScrollMagic and found it too overwhelming
- Explain ScrollMagic API in simple step by step demos.
- We'll use jQuery for selecting elements and other user interactions.
- Build 3 projects from start to finish.
- Learn how to create a more advanced scrolling animations.
- Learn by doing, follow Petr step by step, line by line.
- All working files are available for download.
- Exported SVGs are also included, no need to have Illustrator or Sketch installed to complete this workshop.
- Working knowledge of HTML5 and CSS3.
- Positive attitude towards learning new techniques.
- Tomato lovers more than welcome!
100% MONEY BACK GUARANTEE
Watch the first 3 course videos and if you are not completely satisfied I’ll give you your money back.
I am so confident that you will enjoy the course that you have 14 days to watch the first 3 videos, if you feel you are not learning enough you can enjoy my 100% money back guarantee.
Simply contact me for prompt refund of the full purchase price.