GreenSock - Bella

Make web animations from scratch, understand how they are created and learn new creative skills!

Tired of your website not looking like other award-winning sites despite endless YouTube tutorials and online course libraries?

Cyber Monday Deal

50% Off, Use coupon 50tomatoes

days
0
7
hours
0
3
minutes
4
6
seconds
0
7

Watch The Course Preview

Find out exactly what you will build inside of the course.

Practical GreenSock Reviews
Practical GreenSock Reviews

Everything that Petr does in the videos he explains the pros/cons, reasons why he is coding it a certain way, he doesn’t leave you confused or guessing how or why.

I have gained so much knowledge from this course.

I would recommend it to anyone and everyone!


Student Review - Robbie Crenshaw5 star ratingRobbie Crenshaw, Front-End Web Developer, @robbiecren

The Bella Course

What is it and how is it different?

The Bella Course is here to help you take the #creativeideas inside your head and turn them into a powerful website that stands out, and doesn’t look like literally everyone else’s.

In this course, I’ll teach JavaScript, animations, and effects using GreenSock and ScrollTrigger.

In a series of condensed step-by-step tutorials I will teach you how to handcraft animations with GreenSock and ScrollTrigger!

This course will teach you how add animations to your site with CSS and the industry-standard GreenSock Animation Platform (GSAP).

Start learning today!

Here’s how it’s different…

I don’t create millions of courses that compete with each other,
like other places do… I make the best possible course for the topic that you want to learn.

You’ll want to create!

My course is practical, unlike other programs that take forever before you make your first real-world project – I understand your time is valuable.

In my course you’re learning to make projects you want to make.

We’re in this together!

Let’s be clear, this isn’t your average online course – I understand the struggle.

This is why my course is set-up to deliver! I am equipped with years of experience to guide you throughout your learning.

Dang, that looks good!

You don’t need to be a JavaScript engineer to take my courses.

From web designers looking to build their own animations to developers aiming to add a bit of pizzazz to their site interactions, this course is for anyone who wants to learn how to use animation techniques and GreenSock on the web.

Learn how to make projects
you want to make!

Robbie Crenshaw

Bella is a phenomenal online course, the detail that Petr put into this course blew me away. I have gained so much knowledge from this course.

5 stars

Robbie Crenshaw
Marco Terrinoni

What a marvelous course! It usually takes me weeks to do these sorts of things but I binged the whole lot in one sitting.

5 stars

Marco Terrinoni
Daniel Cruz

I really love the course, some effects that I thought were pretty difficult to achieve, Petr makes them really easy to understand and code.

5 stars

Daniel Cruz

Intended Audience

Is this for you?

  • Anyone on a journey to build an award-winning website (one day).
  • Anyone with some JavaScript and GSAP3 experience.
  • This course is not for GSAP or JS beginners, it might be too fast for you.
  • Designers who would love to build their own animations.
  • Creative developers looking for more advanced GreenSock tutorials.

Objectives

What will you learn?

  • Build more advanced interactive elements step by step.
  • Build a variety of interactive components using GSAP3 and vanilla JavaScript.
  • Learn how to implement parallax images, smooth scrolling, page transitions and more.
  • 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

Jonathan Martínez

It is very easy to learn with Petr, he is explaining everything step by step.

5 stars

Jonathan Martínez
Ilja P.

This course teaches general principles and approaches that one will be using and reusing in animated site projects over and over again. Great value, better than expected.

5 stars

Ilja P.
Shobhit Kuruvilla

If you want to start learning how to make websites with cool animations, this should be the go-to course.

5 stars

Shobhit Kuruvilla

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 Intro, navigation and header.
Unit 1 PGB - 01 - Course Introduction - 5:46  - Preview
Unit 2 PGB - 02 - Navigation Links - 8:00
Unit 3 PGB - 03 - Navigation toggleClass - 3:48
Unit 4 PGB - 04 - Navigation Away - 10:48
Unit 5 PGB - 05 - Padding bottom hack - 7:00
Unit 6 PGB - 06 - Mouse move event - 7:03
Unit 7 PGB - 07 - Header left images - 11:14
Unit 8 PGB - 08 - Header completed - 1:53
Module 2 Reveal Gallery
Unit 1 PGB - 09 - Reveal Gallery Overview - 7:08
Unit 2 PGB - 10 - Reset image position - 6:15
Unit 3 PGB - 11 - Reveal Image - 7:14
Unit 4 PGB - 12 - Center Text - 8:42
Unit 5 PGB - 13 - Reveal Text - 10:05
Unit 6 PGB - 14 - Media Queries in JS - 9:20
Unit 7 PGB - 15 - Remove Event Listeners, killTweensOf - 9:53
Module 3 Portfolio
Unit 1 PGB - 16 - Portfolio Overview - 7:04  - Preview
Unit 2 PGB - 17 - Portfolio mouse enter - 10:36
Unit 3 PGB - 18 - Portfolio mouse leave - 3:41
Unit 4 PGB - 19 - Portfolio mouse move - 9:40
Module 4 Parallax Images and Fixed Navigation
Unit 1 PGB - 20 - Parallax Images Overview - 4:35
Unit 2 PGB - 21 - Parallax ScrollTrigger - 8:50
Unit 3 PGB - 22 - Pin Navigation - 6:06
Unit 4 PGB - 23 - Highlight active item - 9:57
Unit 5 PGB - 24 - Update CSS custom property - 7:01
Module 5 Smooth Scrolling
Unit 1 PGB - 25 - Scroll-jacking - 9:07  - Preview
Unit 2 PGB - 26 - Smooth Scrolling Overview - 2:42
Unit 3 PGB - 27 - ScrollTo Section - 5:34
Unit 4 PGB - 28 - Smooth Scrolling with GSAP Part I - 10:27
Unit 5 PGB - 29 - Smooth Scrolling with GSAP Part II - 10:08
Unit 6 PGB - 30 - Smooth ScrollBar Setup - 3:07
Unit 7 PGB - 31 - Smooth ScrollBar - 12:58
Module 6 Loading Animation
Unit 1 PGB - 32 - Loading Animation Overview - 7:20
Unit 2 PGB - 33 - Loading Animation In - 11:00
Unit 3 PGB - 34 - Loading Animation Out - 11:43
Unit 4 PGB - 35 - Optimizing Loader - 6:16
Unit 5 PGB - 36 - Loading Progress Bar - 8:55
Unit 6 PGB - 37 - Images Loaded - 12:33
Module 7 Page Transitions
Unit 1 PGB - 38 - Setup Barba.js - 11:11
Unit 2 PGB - 39 - How to use VSCode Debugger - 5:43
Unit 3 PGB - 40 - Page Transition Timeline Part I - 9:03
Unit 4 PGB - 41 - Page Transition Timeline Part II - 6:05
Unit 5 PGB - 42 - Animate Barba.js Containers - 7:25
Module 8 Final Overview
Unit 1 Final Integration & Overview
Unit 2 Launch Bonuses

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.

Bella

A single GSAP and ScrollTrigger Project

$147

$97

  •  
  •  
  •  
  • Access to Bella
  • Access to a private student community
  • 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
  • Access to a private student community
  • VIP discount on my future courses
  • Lifetime access

Cyber Monday Deal

50% Off, Use coupon 50tomatoes

days
0
7
hours
0
3
minutes
4
6
seconds
0
6
$97.00 - Purchase Bella

Price in USD, One-Off Payment, Instant Access

Have a few questions? No worries.

Who designed Bella?

Bella has been inspired by award-winning website Leonie Hendrikse & Jeroen Stockstockdutchdesign.com and this course has been produced with a written permission from Exo Ape.

The content of this course is for educational purposes only and you may not reuse the design aspect without Exo Ape’s permission.

A special thanks to Rob Smittenaar (Creative Developer – @robsmittenaar), Robbert Schefman (Art Direction – @RobbertSchefman) and Ronald Gijezen (Motion Design – @ronaldgijezen).

What if I sign up and find out it's not for me?

You are covered by my 14-day 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 a prompt refund of the full purchase price.

Can I download the videos and watch them offline?

No, video files are not available for download. 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.

I have another question!

For any other questions use the Get In Touch form or hit me up on Twitter @ihatetomatoes.

Do you offer a student discount?

Yes, simply prove that you are a student by completing the Student Discount Request form and I will get back to you.

Do you want to master JavaScript animations?

Here is what others think about this course.

5 stars
By Marco Terrinoni

What a marvelous course! It usually takes me weeks to do these sorts of things but I binged the whole lot in one sitting.

It’s very rare to find courses on frontend that focus purely on interaction and motion design using real world scenarios.

Petr breaks down concepts down quickly and doesn’t waste words by going off on tangents.

He’s an exceptional teacher and my only complaint is that this course wasn’t made 5 years ago 🙂

Very much looking forward to seeing a more in depth Barba.js course in the future.

5 stars
By Liam Crane

Petr’s teaching is first class! He makes everything so easy to understand and I don’t feel like I’m getting to overwhelmed by it all when following along.

Being fairly new to vanilla JavaScript I was concerned I would not be able to understand what was happening but Petr breaks everything down in a way thats very easy to understand whats happening under the hood.

Keep up the incredible work, I’m so glad I came across GSAP it really is fantastic and It’s keeping my css clutter free!

5 stars
By Ilja P.

This course teaches general principles and approaches that one will be using and reusing in animated site projects over and over again.

Great value, better than expected.

5 stars
By Daniel Cruz - CSS and Vanilla JS enthusiast

I’ve been trying to look for tutorials on how to make websites like the ones from Awwwards, FWA, etc. and there’s none.

In this course in a little amount of time you learn how to make subtle but powerful effects that make a website look awesome.

I really love the course, some effects that I thought were pretty difficult to achieve, Petr makes them really easy to understand and code.

5 stars
By Jonathan Martinez - WordPress and front-end developer

This was a great tutorial on GSAP3 and ScrollTrigger. The content is in depth and you learn how to animate various parts of a webpage with really cool effects that have endless capabilities.

Petr is very easy to learn from so I have found myself enjoying his videos.

He gives very clear instructions on each section of code and challenges you to think ahead and try to anticipate the scripting so you can learn do it yourself.

I highly recommend this course.

5 stars
By Jaroslav Horák

I had the opportunity to go through this course and boy I have learned a LOT.

Petr once again picks a hard looking webpage and turns it into easy to follow step by step tutorials.

We go from a simple CSS animations to a more complicated GreenSock ones and end up with full page transitions. Wow!

5 stars
By Eric Lam

Undertook Petr’s Bella Project and learnt so many cool and helpful features in GSAP and ScrollTrigger, the course is really easy to follow and easy to get started as it allows you to purely focus on the JavaScript side of the website.

Glad to have found this opportunity and cannot wait for more courses like this!

5 stars
By Robbie Crenshaw - Front-End Web Developer

Bella is a phenomenal online course, the detail that Petr put into this course blew me away.

Everything that Petr does in the videos he explains the pros/cons, reasons why he is coding it a certain way, he doesn’t leave you confused or guessing how or why.

In one of the videos Petr says “Let’s debug this together“, he really took the time to make these videos feel intimate and personal, as if we were working on this project together.

I have gained so much knowledge from this course, I would recommend it to anyone and everyone!

5 stars
By Shobhit Kuruvilla

One of the best learning experiences I’ve ever had. Petr explains everything wonderfully and it’s easy to follow through.

If you want to start learning how to make websites with cool animations, this should be the go-to course.

5 stars
By Mitchell Early - Front End Developer at XCOM

Bella is really packed with so many great lessons. This was a course I had really been looking for in regards to GSAP tweens, timeline animations and parallax effects.

It really covered them all! Absolutely enjoyed it and really came out the other side with a lot more knowledge and best way to approach projects.

Bella was the perfect companion to the previous, Project Slider and the Pen Reveal tutorials.

I found the instructions very clear.

I sometimes tried to make changes when prompted in an attempt to resolve issues before you revealed your way. I find this great especially from a CSS point of view and adding extra rules to help get the effects I wanted.

Having the code snippets was also great to refer to and use when needed throughout each of the videos.

Really well done Petr and thank you for the course!!

Petr’s teaching and knowledge of the GSAP engine are second to none.

Skills gained after completing this course will definitely add to any developers skillset.

5 stars
By Andrew van Ginkel - Frontend Developer

I have done a few of the courses on ihatetomatoes and not once have I been disappointed.

The Bella course will help you gain a lot of useful GSAP knowledge that one would not easily learn by just reading the GSAP documentation.

You will also learn how to use JavaScript to enhance the power of GSAP.

Even though some of the exercises are pretty complex, Petr breaks them down into easy to understand steps.

Highly recommended, one of the best GSAP courses I have done!

5 stars
By Stijn Vinke

Thank you Petr! This is another really good tutorial! I now understand much better how GSAP works in practice. And I like the creativity!

5 stars
By Anthony Buzzelli

Awesome course from Petr.

I enjoy his teaching methods and explanations. I have used GSAP in he past, but only scratched the surface and I am maybe 3/4 done with Bella and learned so much I never imagined possible.

I am completely happy so far and hope to use this new knowledge to further my development skills.

Maybe someday Petr can do a deconstruct video on one of my sites 🙂

5 stars
By Rocky Nguyen, Wishful Thinking Agency

Great course to learn how to recreate a beautifully animated award-winning landing page.

Get this course to learn GSAP3 and how powerful it can be to animate your next web project.

The course content is easy to follow, directions are clear, and final code samples are provided.

What else do you want?! Just get it now!

5 stars
By Ian Webster

Very good course. Clearly explained and broken down into very manageable sections. Learning a lot.

5 stars
By Roland Liechti, Webpresso

I love the course.

As a designer interested in making everything a bit more interactive I do learn a lot.

The steps trough the videos are very well explained. I have a lot of fun. But there’s still a lot to learn 🙂

Many thanks for that course!

5 stars
By Leila Chaouche

This class is amazing. Petr explains his process so well. I can’t wait for the next course!!!

5 stars
By Benjamin Yeung

There is nothing like this course out there. Try to find one.

GSAP + SmoothScroll + Barba, the perfect combo for award websites. Thank you.


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?