#42 - Animation with GSAP (Greensock) - Vue 3 (Options API) Tutorial
In this Vue 3 tutorial, we learn how to use the Greensock (GSAP) Javascript animation library for easy animations. We cover how to install GSAP, the methods it uses to animate, easing, staggering and how to use lifecycle hooks instead of the transition component.
We cover the following topics:
1. Lesson Project
2. What is GreenSock (GSAP)
3. How to install GSAP
4. GSAP Methods
5. How to delay the start of an animation
6. How to repeat an animation
7. GSAP easing methods
8. How to create a stagger effect
9. How to indicate a completed animation
10. Animations in Lifecycle Hooks
Note that this tutorial is for the Vue 3 Options API (which is similar to Vue 2). We later move on to the Composition API and then the Script Setup (3.2 update)
GreenSock (GSAP) documentation
https://greensock.com/docs/
GSAP Cheatsheet
https://greensock.com/cheatsheet/
GSAP Forums
https://greensock.com/forums/forum/11...
This lesson is also available in written format
https://www.koderhq.com/tutorial/vue/...
Check out the Vue 3 for Beginners playlist for more Vue tutorial videos
• Vue 3 for Beginners
Subscribe to the channel and never miss a lesson
/ @koderhq
Visit the website for a wide range of programming tutorials
https://www.koderhq.com
