Animating Numbers with TweenLite
Duration: 56:02
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.
Animating Numbers with TweenLite Overview
What you'll learn
The backbone and the most simple animation Library element of GSAP is the TweenLite object. The TweenLite object is the based object that enables animation in this library. It's a stripped-down court object that enables you to animate is in control numeric values. All further objects that we'll discover in future chapters are more advanced interpretations of the functionality be explored in this chapter.
By the end of this chapter you will know how to animate things. We will talk about the importance of timing, eases and explore the most common methods of TweenLite.
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!Intro
In this chapter we'll reintroduce ourselves to animation and explore the core features of the GSAP tween Library.
Setting up our source files
In this lecture we will set up our first source files starter file. In the process will see how to integrate external source files, at our own script, in an external script that is ours.
Choosing how to import GSAP
The GSAP animation library contains many source files and this lecture we will make sense out of them. By the end of this lesson you will be familiar with the file structure of the GSAP animation Libr
Animating from here to there
getting introduced to the three most important functions in the GSAP library: TweenLite.to,TweenLite.from and TweenLite.fromTo.
Creating a typewriter effect
In this lecture we create our first reusable animation. By the end of this lesson we will have a typewriting effect.
Reusing the typewriter effect
Coding is about creating reusable elements. Recording isn't about solving a specific problem as much as it's about creating solutions that could be reused.
Delaying animations
Delays enable us to sequencer animations and control our animations to create animations that make sense.
The easy way to give animations personality
If you don't change the default ease your animations are bound to have the same taste.
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!