User Generated Timelines
Duration: 01:21:15
This course builds on concepts from Tweens of Timelines.
Created with
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.
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.
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.
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.
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.
Completing the manual mode
In this lesson, we setup the manual mode logic. Enableing manual or automatic recording mode.
Clearing timelines
In this lesson we will explore a clear method of the GSAP timeline.
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.
There is a killer among us
In this lesson we gather to kill animations so let the killing begin.
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!