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.

Nuno Soares

Direct to the point. Cool project and I have learned important things to create more complex animations with GSAP and ScrollTrigger.

5 stars

Nuno Soares
Mitchell Early

Very much enjoyed the course and content from start to finish and found the end project great!

5 stars

Mitchell Early
Andrew van Ginkel

A great tutorial for those wanting to learn how to use GSAP and ScrollTrigger in a creative way.

5 stars

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!

GreenSock and ScrollTrigger Premium Tutorials

A cool project and I have learned important things to create more complex animations with GSAP ScrollTrigger.

5 starsNuno Soares

Target Audience

Intermediate and advanced creative developers, this is for you:)

Practical GreenSock target audience

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

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

GreenSock is ultra high-performance, professional-grade animation platform for the modern web used on more than 70% of award winning websites.

100% Money Back Guarantee

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

Go to bundle

  • 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.

5 stars
By Mitchell Early - Front-end Developer at XComm

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.

5 stars
By Nuno Soares

Direct to the point. Cool project and I have learned important things to create more complex animations with GSAP and ScrollTrigger.

5 stars
By Andrew van Ginkel - Frontend Developer

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?