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

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.

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
Download Source Files