Animating Our UI
Add to favorites
Bringing it All Together
In this video we will bring together everything we have learned so far and add some animations to the UI we created for my CSS Layout and Animations course.
Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.
Templates and source code
Download source files
Download the videos and assets to refer and learn offline without interuption.
Design template
Source code for all sections
Video files, ePub and subtitles
Browse all downloads
1
Intro to SVG and GreenSock Animations
Learn to Make Fun and Fast Animations
10:28
2
How to Create an SVG
Finding, creating, or manipulating SVG for animating
17:29
3
Getting Started with GreenSock
Exploring TweenMax
12:49
4
Timing Functions and Easing
Create Custom Animations with GreenSock's Built in Eases
6:19
5
Creating Complex Animations
Utilizing GreenSock's TimeLineMax
10:20
6
MorphSVG Plugin
Smooth Animations Between Shapes
11:10
7
DrawSVG Plugin
Smoothly Reveal and Hide Strokes
18:01
8
Animating Our UI
Bringing it All Together
16:49
9
More GreenSock Plugins
More Animation Choices with GreenSock Plugins
12:38
Meet the instructor
We all try to be consistent with our way of teaching step-by-step, providing source files and prioritizing design in our courses.
Christina Gorton
Front-end Developer and Instructor at Design+Code
Christina is a self-taught developer who has been working in the industry for a few years. She is a creative coder who likes to turn code into art. She has spent the last few years focused on front-end developer and animations.
2 courses - 7 hours
SVG Animations with GreenSock
Learn how to find, create, and manipulate SVG for the web. Then add the awesome JavaScript animation Library GreenSock to bring those SVG's to life. We will dive into SVG code and explore how to set up your illustrations for animating. Then we will take a look at GreenSock's animation library and many useful plugins to smoothly animate our SVGs on CodePen.
2 hrs
CSS Layout and Animations
Build out a UI prototype in CodePen using CSS Grid and Flexbox. Learn how to bring life to your UI by adding CSS transforms and transformations. We will dive even more in to CSS animations with the CSS animation property and keyframes rule. We’ll wrap it all up by making our prototype responsive and checking out even more cool features on CodePen.
5 hrs
