Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Thomas James Thorstensson

Tweening two properties of same object with overlap

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello Again

 

The following works nicely

 

var tl = new TimelineLite();


var $frame1 = document.getElementById('frame1');
var $txt1 = document.getElementById('txt1');
var $txt2 = document.getElementById('txt2');


tl.set($txt2, {opacity:0})


tl.add( TweenLite.to($frame1, 1, {alpha:1}) );
tl.add( TweenLite.to($frame1, 1, {backgroundColor:"#ff6a6a"}) );
tl.add( TweenLite.to($txt1,1,{scaleY:0, ease:Elastic.easeOut},2) );
tl.add( TweenLite.to($txt1,1,{alpha:0, ease:Elastic.easeOut}) );
tl.add( TweenLite.to($txt2, 1, {alpha:1}),"-=2" );


tl.play();

It works: my last timelinelite addition happens with intended overlap.

 

But what if I would like to have the alpha begin to fade out as I shrink the text of the same object. This won't work:

tl.add( TweenLite.to($txt1,1,{scaleY:0, ease:Elastic.easeOut},2) );
tl.add( TweenLite.to($txt1,1,{alpha:0, ease:Elastic.easeOut}, "-=2.5") );

I tried with a few different values just to make sure it is not the numbers. 

Is there a way I can do an overlap in tweening of the same object: should I perhaps default to the old skool delay method here and so not put it as a timelinelite parameter but "bake it in with the TweeLite.

 

Thanks again

 

.S, over coffe

 

 

 

Share this post


Link to post
Share on other sites

Ehhhhhh. Ignore I got the seconds wrong on the last part. It does work!

 

My Bad!

 

Back to coffe

 

.S

Share this post


Link to post
Share on other sites

I think You can write Your code in shorter format:

var tl = new TimelineLite();

tl.set(txt2, {opacity:0})

.to(frame1, 1, {alpha:1})
.to(frame1, 1, {backgroundColor:"#ff6a6a"})
.to(txt1, 1, {scaleY:0, ease:Elastic.easeOut}, 2)
.to(txt1, 1, {alpha:0, ease:Elastic.easeOut})
.to(txt2, 1, {alpha:1}),"-=2");

We don't need to use getElementByID(). The DOM elements with an ID somehow already have a reference in JS.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×