Tween the progress() and timeScale() of an animation

Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes f…


This content originally appeared on Blog and was authored by Blog

Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details.

Did you know you can tween a tween? What does that even mean? Well, tweens (and timelines) are JavaScript objects that have their own getter-setter methods that allow you to either get or set values. If you make a tween or timeline the target of a tween you can then tween its progress() and timeScale() just like you would the opacity of a DOM element! The video below explains how this works and also shows you how to tween getter setter methods in your own JavaScript objects.

Watch the video

Demo 1: Tween progress()

See the Pen Tween a tween (video) by GreenSock (@GreenSock) on CodePen.

Demo 2: Tween timeScale()

See the Pen Tween timeScale() of a Timeline by GreenSock (@GreenSock) on CodePen.


This content originally appeared on Blog and was authored by Blog


Print Share Comment Cite Upload Translate Updates
APA

Blog | Sciencx (2019-04-02T15:10:47+00:00) Tween the progress() and timeScale() of an animation. Retrieved from https://www.scien.cx/2019/04/02/tween-the-progress-and-timescale-of-an-animation/

MLA
" » Tween the progress() and timeScale() of an animation." Blog | Sciencx - Tuesday April 2, 2019, https://www.scien.cx/2019/04/02/tween-the-progress-and-timescale-of-an-animation/
HARVARD
Blog | Sciencx Tuesday April 2, 2019 » Tween the progress() and timeScale() of an animation., viewed ,<https://www.scien.cx/2019/04/02/tween-the-progress-and-timescale-of-an-animation/>
VANCOUVER
Blog | Sciencx - » Tween the progress() and timeScale() of an animation. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2019/04/02/tween-the-progress-and-timescale-of-an-animation/
CHICAGO
" » Tween the progress() and timeScale() of an animation." Blog | Sciencx - Accessed . https://www.scien.cx/2019/04/02/tween-the-progress-and-timescale-of-an-animation/
IEEE
" » Tween the progress() and timeScale() of an animation." Blog | Sciencx [Online]. Available: https://www.scien.cx/2019/04/02/tween-the-progress-and-timescale-of-an-animation/. [Accessed: ]
rf:citation
» Tween the progress() and timeScale() of an animation | Blog | Sciencx | https://www.scien.cx/2019/04/02/tween-the-progress-and-timescale-of-an-animation/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts