Master React animations with Greensock (GSAP) : course 2

Create an amazing scale down hover effect Menu with React.js and GSAP

React.js is the most popular Javascript library and Greensock, the best JavaScript animation library. In this course we will combine them together to build an amazing Menu animation.

What you’ll learn

Styled React component with styled-components.
How To Use .map() to Iterate Through Array Items in JavaScript.
How To Use the filter() Array Method in JavaScript.
Conditional Rendering in react.
React state management.
Target and Animate elements React with Greensock.
Create a split text staggered animation with Greensock.
Creating and controlling timelines with greensock.
Avoiding flash of unstyled content (FOUC).
Animating on interaction (onMouseLeave, onMouseEnter, onMouseMove).
Create a custom cursor.

Course Content

Introduction and the project we will build –> 2 lectures • 12min.
Create the header, style it and create the cross animation –> 2 lectures • 33min.
Create and style Menu and MenuItems –> 4 lectures • 43min.
Create and style Content and Project –> 2 lectures • 36min.
Create the mouse interactions –> 3 lectures • 33min.
Create the rotated 3D letter animation and the custom cursor –> 2 lectures • 39min.
The end –> 1 lecture • 1min.

Requirements

React.js is the most popular Javascript library and Greensock, the best JavaScript animation library. In this course we will combine them together to build an amazing Menu animation.

We will exploring how to create an amazing Rotated 3D Letter menu and this pretty cool Scale down image animation with React and GSAP.

We will cover topics such as map and filter, conditional rendering, state management, animate on interaction and creating and controlling timeline with Greensock.

This course is a step by step course to make sure you understand exactly how React.js and GSAP work together, and will get you a new job working as a front end developper or help you build that experience you’ve always been dreaming about. This course also care about design and not only programming.

What will you build?

This course features 15 videos to help you understand how React.js and Greensock (GSAP) work. No prior experience with either is necessary. We will build together an amazing menu with aesthetic and fine tune animation. Each section in this course is added incrementally, to make sure that you have a solid foundation of knowledge.

This is a list of the topics you’ll learn in this course: