Play video
SVG Animations with GreenSock
9 sections - 2 hours of video
Add to favorites
Notify me
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.
Taught by Christina Gorton
Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.
9 topics
All techniques are explained step-by-step, in a beginner-friendly format so that you can easily follow in a cohesive way.
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
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
Videos
ePub
Subtitles
What's included?
All courses come with downloadable files to help you design, code and follow the course offline.
300+ hours of video
Subtitles in English, Chinese
Source files, ePub
UI, icons, illustrations
Premium, support chat
Source files
Design templates and source code files are included to help you learn.
ePub files
Read offline using Books for iOS, Mac or other apps that can read this format.
Video files
Download the videos so that you can watch later or offline using any video player.
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
Flutter
Certificate
Figma
Certificate
SwiftUI
Certificate
UI Design
Certificate
Create a profile
Get certificates
After passing a test, we’ll award you with an online certificate. You can add them to your profile after completing the courses.
Stories
How students learned from our courses
See what people have learned and built by taking courses from Design+Code
Fabio Sasso
Founder of ABDZ
Fabio Sasso
Founder of ABDZ
My first iOS app is available on the AppStore. I literally didn’t know anything about SwiftUI (still not much) and in probably 4 weeks was able to recreate my android app for iOS. Highly recommend MengTo videos!
Ángel Vāzquez
UI-X interaction & design
Ángel Vāzquez
UI-X interaction & design
I can’t thank you enough @MengTo, thank you for making the whole process so enjoyable. This is the beginning of a new era for me thanks to you I found my passion and what I want to do for the next following years. Red heart
David Norris
App Developer
David Norris
App Developer
Big thanks to you and your DesignCode team. A big help to me. Learning design is just as important as the code that drives it. Built @getNebulaApp, using the SwiftUI courses. Essential for learning iOS and macOS app dev.
Artem Adams
Artchitect at IBM
Artem Adams
Artchitect at IBM
Learned a lot from your course to port my app from #AppleWatch to #iPhone, #iPad and #Mac. All SwiftUI, one code base, iCloud, learn words with Widgets.
Daniel Korpai
Designer at Invision
The new React for Designers course by @mengto is my dream course since I started learning front-end dev as a designer! I wish a similar course would have existed back in the days. Everything is in one place for designers, this is just pure gold! ✨
Rachel Nelson
Mobile developer
Your first book was extremely helpful for me because, like yourself, I also started off as a pixel-pusher and I liked to make things look pretty without thinking too much of how design really functions. Your book has really helped me to fine-tune my skills in design!
