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?
Watch The Course Preview
Find out exactly what you will build inside of the course.
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!
Robbie 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!
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.
Robbie Crenshaw
What a marvelous course! It usually takes me weeks to do these sorts of things but I binged the whole lot in one sitting.
Marco Terrinoni
I really love the course, some effects that I thought were pretty difficult to achieve, Petr makes them really easy to understand and code.
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!
It is very easy to learn with Petr, he is explaining everything step by step.
Jonathan Martínez
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.
Ilja P.
If you want to start learning how to make websites with cool animations, this should be the go-to course.
Shobhit Kuruvilla
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 | 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) 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.
Bella
A single GSAP and ScrollTrigger Project
$147
$97
- 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.
Who designed Bella?
Bella has been inspired by award-winning website Leonie Hendrikse & Jeroen Stock – stockdutchdesign.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.
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.
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!
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.
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.
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.
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!
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!
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!
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.
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.
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!
Thank you Petr! This is another really good tutorial! I now understand much better how GSAP works in practice. And I like the creativity!
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 🙂
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!
Very good course. Clearly explained and broken down into very manageable sections. Learning a lot.
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!
This class is amazing. Petr explains his process so well. I can’t wait for the next course!!!
There is nothing like this course out there. Try to find one.
GSAP + SmoothScroll + Barba, the perfect combo for award websites. Thank you.
Thank you so much Petr!
Excellent presentation of the material!
It’s great and it goes into many details. I haven’t seen anyone else doing this on this price tier.
The only thing I could say is, the code could have a better structure, even though this is understandable for teaching reasons…
Thanks
Clever and effective tutorials to explain gsap in context.
I couldn’t recommend highly enough if you are up to speed with HTML / CSS and just want to write dynamic vanilla JS.
Awesome! Great tutorial. Great explanations. A wonderful online course.
I love to learn with Petr.
This is by far the most practical course I’ve ever taken.
Petr is a great teacher and makes the whole course very easy to follow.
I’ve thoroughly enjoyed it and would highly recommend it to anyone interested in this kind of stuff.
♥
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?