GreenSock - Pen Reveal
Learn how to build a cool product reveal effect using GSAP3 and ScrollTrigger.
Watch The Course Preview
Find out exactly what you will build inside of the course.
Direct to the point. Cool project and I have learned important things to create more complex animations with GSAP and ScrollTrigger.
Nuno Soares
Very much enjoyed the course and content from start to finish and found the end project great!
Mitchell Early
A great tutorial for those wanting to learn how to use GSAP and ScrollTrigger in a creative way.
Andrew van Ginkel
Free for existing students
Simply login to your account and get started.
Free access for anyone who has already purchased any of my “closed” premium courses.
Intended Audience
Is this for you?
- Anyone with a decent knowledge of HTML and CSS.
- Anyone with some JavaScript and GSAP3 experience.
- This course is not for GSAP beginners, it might be too fast for you.
- Designers who would love to build their own animations.
- Creative developers looking for a more advanced GreenSock tutorials.
Objectives
What will you learn?
- Explain GSAP API in simple step by step demos.
- Build a project from start to finish using GSAP3 and ScrollTrigger.
- Learn how to create a more advanced scrolling animations.
- Learn by doing, follow Petr step by step, line by line.
Prerequisites
What do you need before starting?
- A completion of my GreenSock 101 is highly recommended.
- All working files are available for download.
- Positive attitude towards learning new techniques.
- A genuine interest in GreenSock and JavaScript animations.
- Tomato lovers more than welcome!
A cool project and I have learned important things to create more complex animations with GSAP ScrollTrigger.
Nuno Soares
Target Audience
Intermediate and advanced creative developers, this is for you:)
Table of Content
Want to see what you will learn? Watch the preview below.
| Module 1 | Pen Reveal |
| Unit 1 | ST-PR - 01 - Introduction - 6:38 - Preview |
| Unit 2 | ST-PR - 02 - Function based values - 5:50 |
| Unit 3 | ST-PR - 03 - Pin Element - 8:29 |
| Unit 4 | ST-PR - 04 - Pin Spacing - 3:07 |
| Unit 5 | ST-PR - 05 - Reset bottom parts - 7:49 |
| Unit 6 | ST-PR - 06 - Reveal part 6 - 7:23 |
| Unit 7 | ST-PR - 07 - GSAP Utils toArray - 7:56 |
| Unit 8 | ST-PR - 08 - Toggle Class - 7:47 |
Petr Tichy (@ihatetomatoes) is a long-time GreenSock ambassador, author of multiple successful online courses, a host of Awwwards Live Jury website reviews and a front-end developer, just like you.
GreenSock is ultra high-performance, professional-grade animation platform for the modern web used on more than 70% of award winning websites.
Watch the first 5 course videos and if you are not completely satisfied, you can enjoy my 14-day 100% money back guarantee. Simply contact me for a prompt refund.
Course Packages
Select your package.
Pen Reveal
A single ScrollTrigger Project
$67
$47
- Access to Pen Reveal
- Lifetime access
Best Value
Practical GreenSock
A bundle of 3 projects
$281
$127
- Access to Projects Slider
- Access to Pen Reveal
- Access to Bella
- VIP discount on my future courses
- Lifetime access
Sold out
Have a few questions? No worries.
I have already purchased some of your currently closed premium courses, can I get a discount?
Access to Projects Slider and Pen Reveal is free for anyone who has already purchased any of my “closed” premium courses.
Simply login to your account and get started.
Can I download the videos and watch them offline?
No, video files are not available for downloads. You need to be online and logged in to my site to be able to follow this course.
Do I need GreenSock Club membership?
No, you don’t need the paid GreenSock club membership. We will only cover the core GSAP. I use GSDevtools in some units, but that does not stop you from following along.
What software do I need to complete the workshop?
All you need is a code editor (I am using VSCode and LiveServer extension). You can download the starting files and follow me step-by-step from start to finish of each project.
What if I sign up and find out it's not for me?
You are covered by my 14 days money back guarantee. If you are not thrilled after watching the first 5 videos, you can enjoy my 100% money back guarantee. Simply contact me for prompt refund of the full purchase price.
I have another question!
For any other questions use the Get In Touch form or hit me up on Twitter @ihatetomatoes.
Do you want to master JavaScript animations?
Here is what others think about this course.
It was a really great course and good use of ScrollTrigger. Very much enjoyed the course and content from start to finish and found the end project great!
Especially liked how you achieved so much visual impact with so little assets i.e. pen images. Great use of CSS in there too.
Direct to the point. Cool project and I have learned important things to create more complex animations with GSAP and ScrollTrigger.
A great tutorial for those wanting to learn how to use GSAP to pin elements as the user scrolls down the page. The toggle class function is also used to add some extra pizzazz to the final animation.
♥
Made by Petr Tichy
Now that you are at the bottom of the page, why not to do some clicking instead of scrolling and reading?