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

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.

Read more

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

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.

What's inside

Syllabus

Course Overview
Getting Started
Using the ScrambleText Plugin
Using the SplitText Plugin
Read more
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
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
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
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
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
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
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
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
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
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
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.

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.
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.
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.
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.
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.
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.
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.
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.

Share

Help others find this course page by sharing it with your friends and followers:
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.

© 2016 - 2024 OpenCourser