Dragging elements with Draggable
As we crack into this chapter, we're going to take TimelineLite control to a completely new level. In this chapter we move away from preconfigured animations and move the control to the hands of the end users. To enable this control we need to create Draggable components. In this lesson we will add SVG circles onto the HTML page and then use the Draggable component to make them draggable.
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