User controlled Animations
In the last few chapters, we've been exploring timelines as a way to edit and control a large pile of tweens. That's not changing in this chapter as well, but we're taking our tweens to the next level by creating dynamic animations. The animations will be controlled and changed directly by the user. The idea behind this chapter is to open up your eyes to the possibilities of user interactions and their affect on animations. Animations don't have to be something preconfigured completely in advance - they could be triggered by: users actions, music, time, data and other numeric factors.
Ready to Level Up Your Skills?
Join thousands of learners on 02GEEK and start your journey to becoming a coding expert today!
Enroll Now for Free!User controlled Animations
The idea behind this chapter is to open up your eyes to the possibilities of user interactions and how their affect on animations.
01:08
Dragging elements with Draggable
In this lesson we will create a button that will dynamically and able to user to add SVG circles into the HTML page and then use the draggable component to make the new item draggable on the page.
13:56
Following the users moves
In this lecture we want to start capturing each movement of the user and storing it inside of our time line animation so we can replay all the steps to user created whenever we want to.
12:33
Moving to manual mode
In this lesson we will start creating a manual mode enabling the user to reposition all the elements they want before triggering an animation step we will complete the task in the next lesson.
18:26
Completing the manual mode
In this lesson, we setup the manual mode logic. Enableing manual or automatic recording mode.
13:26
Clearing timelines
In this lesson we will explore a clear method of the GSAP timeline.
02:55
Removing the most recent animation
In this lesson we notch up the sophistication of our timeline by enabling the user to have remorse by clicking on the remove recent button and removing the most recent animation added in.
12:06
There is a killer among us
In this lesson we gather to kill animations so let the killing begin.
06:45