02Geek HTML5 and JavaScript, TypeScript, React, Flash, ActionScript online School
CoursesArchiveBooks
Get Free Access

User Generated Timelines

We will spend our focus in this chapter on user generated animations.

Duration:

01:21:15

Created with

Ben Fhala

Ben Fhala

Ben Fhala is the creative force and founder behind 02geek, a pioneering platform dedicated to making web development accessible to everyone. With over 18 years of experience in the industry, Ben has a deep passion for teaching and a knack for breaking down complex concepts into easy-to-understand lessons.

User Generated Timelines Overview

What you'll learn

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 that will be controlled and change directly by the user. The idea behind this chapter is the open up your eyes to the possibilities of user interactions and how they affect animations. Animations don't have to be something preconfigured completely in advance they could be triggered by users actions, music, time, Data and other factors do you could come up with. We will spend our focus in this chapter to user generated animations.

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
Download Source Files