We may earn an affiliate commission when you visit our partners.

Building Advanced JavaScript Animations with GSAP

This course will teach JavaScript developers, who have already completed the first Animation with GSAP course, or have a good understanding of JavaScript, animation in general.

GreenSock has been around since ActionScript 2 and Flash, since then it has kept up with the industry and turned into one of the leading JavaScript animation libraries. In this course, Building Advanced JavaScript Animations with GSAP, you'll be learning some of the plugins that are associated with paid version of GreenSock. First, you'll explore how to MorphSVG. Next, you'll discover how to DrawSVG. Finally, you'll learn about ScrambleText and also SplitText. By the end of this course, you'll know how to create some unbelievable animation for creative storytelling and games.

Enroll now

Or start your subscription today

And complete this course over a free trial

Here's a deal for you

We found an offer that may be relevant to this course.

Save money when you learn. All coupon codes, vouchers, and discounts are applied automatically unless otherwise noted.

Valid for a limited time only

Future-proof your career

Access O'Reilly books, live events, courses, and more. Save with an annual subscription.

Take

15%

off

What's inside

Syllabus

Course Overview

Getting Started

Using the ScrambleText Plugin

Using the SplitText Plugin

Using the MorphSVG and DrawSVG Plugin

Animated Opening for Final Application

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Captures the industry standard with GreenSock, which is seen as a leading JavaScript animation library

Focuses on the paid version of the library, encompassing key plugins like MorphSVG, DrawSVG, ScrambleText, and SplitText

Intended for JavaScript developers with a base understanding of animation

Taught by Todd Shelton, an experienced instructor in the field

Builds on the foundational knowledge gained in the first course of the series, making it suitable for those seeking to advance their skills

Save this course

Save Building Advanced JavaScript Animations with GSAP to your list so you can find it easily later:

Save

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Building Advanced JavaScript Animations with GSAP with these activities:

Review Animation Fundamentals

Show steps

Strengthen your understanding of the core concepts of animation by reviewing fundamental principles before starting the course.

Browse courses on Animation

Show steps

Review the 12 principles of animation
Study different types of animation, such as keyframe and tweening
Practice creating simple animations to reinforce your knowledge

Practice JavaScript Coding

Show steps

Enhance your JavaScript skills by practicing coding exercises and solving coding challenges before starting the course.

Browse courses on JavaScript

Show steps

Work through coding exercises on platforms like LeetCode
Solve coding challenges found in online forums or books
Create your own JavaScript projects to apply your skills

Create a MorphSVG animation

Show steps

Create a MorphSVG animation to gain a hands-on understanding of how this plugin works.

Show steps

Follow a tutorial on MorphSVG
Create a simple SVG image
Use MorphSVG to animate the SVG image
Experiment with different MorphSVG options

Eight other activities

Expand to see all activities and additional details

Show all 11 activities

Complete SplitText exercises

Show steps

Complete practice exercises to master the SplitText plugin.

Show steps

Find practice exercises or tutorials on SplitText
Attempt several exercises on increasing difficulty
Practice SplitText on real-world projects

Follow Debugging Tutorial

Show steps

Reinforce your understanding of common JavaScript debugging techniques by following a guided tutorial.

Browse courses on JavaScript

Show steps

Identify and install a suitable debugging tool
Locate a comprehensive debugging tutorial
Step through the tutorial while actively debugging your code

Explore Advanced GSAP Techniques

Show steps

Expand your knowledge of GreenSock's capabilities by exploring advanced tutorials that demonstrate complex animation techniques.

Browse courses on GSAP

Show steps

Search for tutorials on advanced GSAP features
Follow the tutorials to implement various techniques
Experiment with the techniques in your own projects

Collaborative Animation Project

Show steps

Enhance your learning by collaborating with peers on a creative animation project, leveraging GSAP for advanced effects.

Browse courses on Collaboration

Show steps

Form a study group with other students
Brainstorm a creative animation idea
Divide tasks and work collaboratively
Present the final animation and discuss the process

Develop an animated project using GSAP

Show steps

Create an animated project to demonstrate your skills with the GSAP library and plugins.

Browse courses on Animation

Show steps

Brainstorm ideas for an animated project
Create a storyboard or plan for the animation
Develop the animation using GSAP
Refine and iterate on the animation

Build Interactive SVG Animation

Show steps

Apply the GSAP plugins covered in the course by creating an interactive animation using SVG elements.

Show steps

Plan the animation and design the SVG assets
Implement GSAP plugins for SVG manipulation
Add interactivity to control the animation

Animation Showcase Presentation

Show steps

Solidify your understanding of GSAP by creating a presentation showcasing your animations, techniques, and lessons learned.

Browse courses on Presentation

Show steps

Gather your best animations created using GSAP
Design slides to explain the techniques used
Include code snippets and demos to enhance understanding
Practice presenting your animation showcase

GSAP Animation Challenge

Show steps

Put your skills to the test and showcase your creativity by participating in a GSAP animation challenge or competition.

Browse courses on Competition

Show steps

Find a suitable animation challenge or competition
Brainstorm and design your animation
Implement the animation using GSAP
Submit your entry and seek feedback

Career center

Learners who complete Building Advanced JavaScript Animations with GSAP will develop knowledge and skills that may be useful to these careers:

Front-End Engineer

Front-End Engineers design, develop, test, deploy, and maintain front-end software applications. They primarily focus on what users will interact with, such as the website UI, and how it will appear on different devices. This course will help Front-End Engineers build a foundation in advanced JavaScript animations with GSAP. Animation is a huge part of creating an attractive and attention-grabbing user interface. GSAP is one of the best animation libraries and this course will provide you with foundational knowledge and skills to help you excel as a Front-End Engineer.

See salaries and explore the career path for Front-End Engineer

User Interface Designer

User Interface Designers are in charge of the look and feel of a product or software application. They collaborate with UX and product designers to conceptualize, develop, and iterate on designs that enhance user experience. This course will provide you with a foundation in advanced JavaScript animations with GSAP. Animation is a huge part of creating an attractive and attention-grabbing user interface. GSAP is one of the best animation libraries and this course will provide you with foundational knowledge and skills to help you excel as a User Interface Designer.

See salaries and explore the career path for User Interface Designer

Web Developer

Web Developers design and develop websites and web applications. They work with UX designers to first think about the website or application and then build it into a functional product. This course will provide you with a foundation in advanced JavaScript animations with GSAP. Animation is a huge part of creating an engaging and unforgettable user experience. GSAP is one of the best animation libraries and this course will provide you with foundational knowledge and skills to help you excel as a Web Developer.

See salaries and explore the career path for Web Developer

Motion Graphics Artist

Motion Graphics Artists use computer graphics and animation to create visuals for a variety of media, including websites, videos, and presentations. They work with designers and other artists to bring creative visions to life. This course will provide you with a foundation in advanced JavaScript animations with GSAP. Animation is a key component of motion graphics and GSAP is one of the best animation libraries. This course will provide you with foundational knowledge and skills to help you excel as a Motion Graphics Artist.

See salaries and explore the career path for Motion Graphics Artist

Visual Effects Artist

Visual Effects Artists use computer graphics to create visual effects for movies, television shows, and video games. They work with directors and other artists to bring creative visions to life. This course will provide you with a foundation in advanced JavaScript animations with GSAP. Animation is a crucial part of visual effects and GSAP is one of the best animation libraries. This course will provide you with foundational knowledge and skills to help you excel as a Visual Effects Artist.

See salaries and explore the career path for Visual Effects Artist

Creative Director

Creative Directors lead teams of artists and designers to create visual content for projects such as advertising campaigns, marketing materials, and product packaging. They collaborate with clients to understand their needs and develop creative concepts. This course will provide you with a foundation in advanced JavaScript animations with GSAP. Animation is an important part of many creative projects and GSAP is one of the best animation libraries. This course will provide you with foundational knowledge and skills to help you excel as a Creative Director.

See salaries and explore the career path for Creative Director

Software Engineer

Software Engineers design, develop, test, and deploy computer software. They work on a variety of projects, including operating systems, software applications, and websites. This course may provide you with a foundation in advanced JavaScript animations with GSAP. Animation is an important part of many software applications and GSAP is one of the best animation libraries. This course may provide you with foundational knowledge and skills to help you excel as a Software Engineer.

See salaries and explore the career path for Software Engineer

Art Director

Art Directors oversee the visual aspects of projects such as advertising campaigns, magazine layouts, and websites. They collaborate with clients and other artists to develop creative concepts. This course may provide you with a foundation in advanced JavaScript animations with GSAP. Animation is an important part of many creative projects and GSAP is one of the best animation libraries. This course may provide you with foundational knowledge and skills to help you excel as an Art Director.

See salaries and explore the career path for Art Director

Product Designer

Product Designers design and develop the look, feel, and functionality of products. They work with engineers and other stakeholders to bring products to market. This course may provide you with a foundation in advanced JavaScript animations with GSAP. Animation is an important part of many products and GSAP is one of the best animation libraries. This course may provide you with foundational knowledge and skills to help you excel as a Product Designer.

See salaries and explore the career path for Product Designer

Game Designer

Game Designers design and develop video games. They work with programmers, artists, and other stakeholders to create games that are fun and engaging. This course may provide you with a foundation in advanced JavaScript animations with GSAP. Animation is an important part of many games and GSAP is one of the best animation libraries. This course may provide you with foundational knowledge and skills to help you excel as a Game Designer.

See salaries and explore the career path for Game Designer

Animator

Animators create visual content for a variety of media, including movies, television shows, and video games. They work with directors and other artists to bring creative visions to life. This course may provide you with a foundation in advanced JavaScript animations with GSAP. GSAP is one of the best animation libraries and this course may provide you with foundational knowledge and skills to help you excel as an Animator.

See salaries and explore the career path for Animator

Graphic designer

Graphic Designers create visual content for a variety of media, including websites, magazines, and brochures. They work with clients to develop creative concepts and produce high-quality designs. This course may provide you with a foundation in advanced JavaScript animations with GSAP. Animation is an important part of many graphic design projects and GSAP is one of the best animation libraries. This course may provide you with foundational knowledge and skills to help you excel as a Graphic Designer.

See salaries and explore the career path for Graphic designer

UX Designer

UX Designers design and develop the user experience for websites and applications. They work with users to understand their needs and develop designs that are easy to use and enjoyable. This course may provide you with a foundation in advanced JavaScript animations with GSAP. Animation is an important part of many UX designs and GSAP is one of the best animation libraries. This course may provide you with foundational knowledge and skills to help you excel as a UX Designer.

See salaries and explore the career path for UX Designer

Computer Programmer

Computer Programmers write code to create software applications and systems. They work with users to understand their needs and develop programs that are efficient and reliable. This course may provide you with a foundation in advanced JavaScript animations with GSAP. Animation is an important part of many software applications and GSAP is one of the best animation libraries. This course may provide you with foundational knowledge and skills to help you excel as a Computer Programmer.

See salaries and explore the career path for Computer Programmer

Data Analyst

Data Analysts collect, analyze, and interpret data to help businesses make informed decisions. They work with data from a variety of sources to identify trends and patterns. This course is unlikely to be of direct benefit to you in your role as a Data Analyst. The skills and knowledge taught in this course are not directly applicable to the work of a Data Analyst.

See salaries and explore the career path for Data Analyst

Reading list

We've selected seven books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Building Advanced JavaScript Animations with GSAP.

A Million And One Random Digits

Save

Classic guide to JavaScript. It covers the core concepts of JavaScript in a clear and concise way. It's a great resource for anyone who wants to learn more about JavaScript.

A Million And One Random Digits

Paperback

Check price

A Million And One Random Digits

Kindle Edition

Check price

DOM Scripting

Save

Concise guide to SVG. It covers the basics of SVG, including how to create and edit SVG files. It also covers more advanced topics such as animation and interactivity.

DOM Scripting: Web Design with JavaScript and the...

Paperback

$$$

React: Up & Running

Save

Collection of JavaScript patterns. It covers a wide range of topics, from basic patterns to advanced patterns. It's a great resource for anyone who wants to learn more about JavaScript.

The Problem with Native JavaScript APIs

Save

Guide to writing high-performance JavaScript code. It covers a wide range of topics, from performance optimization to debugging techniques. It's a great resource for anyone who wants to learn more about how to write efficient JavaScript code.

The Problem with Native JavaScript APIs

Paperback

Check price

The Problem with Native JavaScript APIs

Kindle Edition

Check price

Java in a Nutshell

Save

Comprehensive guide to JavaScript. It covers everything from the basics of JavaScript to advanced topics such as functional programming and object-oriented programming. It's a great resource for anyone who wants to learn more about JavaScript.

Java in a Nutshell

Kindle Edition

Secrets of the JavaScript Ninja

Save

Collection of advanced JavaScript techniques. It covers a wide range of topics, from performance optimization to debugging techniques. It's a great resource for anyone who wants to learn more about how to write efficient JavaScript code.

Secrets of the JavaScript Ninja

Paperback

The 2020 Web Almanac

Save

Practical guide to SVG. It covers everything from the basics of SVG to advanced topics such as animation and interactivity. It's a great resource for anyone who wants to learn more about how to use SVG in their web projects.

Help others find this course page by sharing it with your friends and followers:

Facebook

Copy Link

Similar courses

Here are nine courses similar to Building Advanced JavaScript Animations with GSAP.

NativeScript: Animation Techniques

Creating Animations with Vue 2

Building UIs with the Web Animations API

Working with Angular Animations

SVG Animation with JavaScript

Explore Animation

Hands-On with Terraform on Azure

Creative Advanced CSS & JavaScript Animations - 150 Projects

Creative Advanced CSS & JavaScript Animations - 150...

JavaScript Fundamentals

Time

158 hours

Level

Intermediate

Via

Pluralsight

Instructor

Todd Shelton

Language

English

Good to know

Captures the industry standard with GreenSock, which is seen as a leading JavaScript animation library

Focuses on the paid version of the library, encompassing key plugins like MorphSVG, DrawSVG, ScrambleText, and SplitText

Intended for JavaScript developers with a base understanding of animation

Taught by Todd Shelton, an experienced instructor in the field

Builds on the foundational knowledge gained in the first course of the series, making it suitable for those seeking to advance their skills

Share and help others discover this course.

Facebook

Link

Don't miss out

Enroll today to gain access to this course

Enroll in this course

Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.