02Geek HTML5 and JavaScript, TypeScript, React, Flash, ActionScript online School

The CSS Plugin

This chapter is dedicated to CSS and the CSS plug-in.

Duration: 01:01:10

Dependency warningThis course builds on concepts from Animating Numbers with TweenLite.
Advanced Level
Advanced Level
Fast-pace
Fast-pace

Created with

Ben Fhala

Ben Fhala

Ben Fhala is the creative force and founder behind 02geek, a pioneering platform dedicated to making web development accessible to everyone. With over 18 years of experience in the industry, Ben has a deep passion for teaching and a knack for breaking down complex concepts into easy-to-understand lessons.

The CSS Plugin Overview

What you'll learn

Welcome to chapter 2 of Learning to Animate with GSAP in JavaScript. This chapter is dedicated to CSS and the CSS plug-in. We won't explore every single CSS property but take a Birdsview through the world of CSS animation. In this chatper we will see how to animate 2-D and 3-D CSS2 and CSS3 properties.

Until now we work without any plug-ins. In this chapter we break into the world of plug-ins as we explore the features of the CSS plug-in. By the end of this course you will know how to integrate plug-ins when working with the GreenSock JS library, animate CSS, 2d elements and 3d elements.

Ready to Level Up Your Skills?

Join thousands of learners on 02GEEK and start your journey to becoming a coding expert today!

Enroll Now for Free!

Animating CSS

In this chatper we will see how to animate 2-D and 3-D CSS2 and CSS3 properties.

00:46

Integrating the CSSPlugin

We will explore in this lesson the set up, and some CSS animations.

17:24

Stop hovering over me

In this lesson we're going to take our animations and make them more interactive.

12:36

Creating 2D animations

By the end of this lesson Marina wrap up our conversation on 2D transformations.

04:29

Moving into the 3D realm

To solve this problem we will create a transformed perspective that will take our element from it's 2D flat environment and output it in a 3D perspective.

09:19

It's flippin flipping

In this lesson we continue that process as we switch our content(fake switch) an enemy back completing a full circle. More accurately, creating an illusion of a full circle.

06:02

Transforming the origin

In this lesson we will to take a look at the transformOrigin property and see how to work with it in the GSAP tween library.

10:34

Ready to Level Up Your Skills?

Join thousands of learners on 02GEEK and start your journey to becoming a coding expert today!

Enroll Now for Free!