Moving to manual mode
In our last lecture, we created a tracker that followed every single move of the user and added them into a TimelineLite timeline. The problem with that design was that we could only animate one thing at a time. It would be great if we could animate more than one item at a time. In this lesson, we will create a manual toggle button that will let the user to re-position all the elements before triggering a "key frame". We will complete this task in the following lecture.
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