Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Joe Hakooz

TimelineMax kill then new - Visibility issues

Recommended Posts

Hello,

I have a few divs that will contain separate TimelineMax animations. Only one "slide" is visible at a time. Inside each slide are a few elements that I want to fade in using AutoAlpha...

<div class="slide" id="Slide1">
  <p>Line one</p>
  <p>Line two</p>
  <p>Line three</p>
</div>

<div class="slide" id="Slide2">
  <p>Line one</p>
  <p>Line two</p>
  <p>Line three</p>
</div>

In an effort to save memory, I reuse the same variable called "tl" to store my TimelineMax object. After "Slide1" is done I call tl.kill() then re-instanciate it for "Slide2", and so on...

 

The problem is when I go back to "Slide1" I kill then re-attach a new TimelineMax object. But now the animated elements do not appear. 

 

Inspecting the code, after an element is supposed to fade in it has the inline style="visibility:hidden" where as the first time TimelineMax gave them style="visibility:inherit". 

 

My guess is that TimelineMax appropriately adds the inline styles and everything works well. But the second time "visibility:inherit" doesn't work because they are inheriting "hidden" from the previous TimelineMax animation. Or something along those lines.

 

My question(s)

Is there some way to "reset" my elements so they are ready for a new TimelineMax instance?

1. Should I remove all inline styles created by TimelineMax so that I can attach a new instance later on?

2. Perhaps I should just add a TimelineMax instance once to each slide. I'm worried however that this will create memory issues with a large number of slides. 

3. Finally, maybe I'm just not using kill() properly?

 

I hope my question is clear. If not I'll try to setup a Codepen. 

Thanks!

Link to comment
Share on other sites

Okay... Here is my Codepen. Notice if you click the buttons one at a time and wait for the animations to finish it works.

However, if you click between the buttons a few times it breaks the animation. 

 

See the Pen BNRoBv by jhakooz (@jhakooz) on CodePen

Link to comment
Share on other sites

I found a solution but it doesn't seem like the most elegant. Please let me know if there is a better way. 

 

Again, when killing and re-adding a TimelineMax instance mid animation, things get out of whack. To resolve this I simply seek to the end of the animation just before killing it. Seems to do the trick.

tl.seek('-=0');
tl.kill();

I left the Codepen "broken" so people can see what I mean. 

Link to comment
Share on other sites

I prefer Diaco's solution. I think you would need hundreds of slides / timelines before memory would be a factor. 

 

I also think your idea of seek("-=0") to the end is fine as it works to reset the from() tweens (you could also use progress(1))

But, this won't work well with to() tweens.

 

Another option is to use clearProps:"all" to remove all inline styles of the tweened elements like so

TweenLite.set($('.slide p'), {clearProps:"all"})
    $('.slide').hide();
    $(slide).show();

http://codepen.io/anon/pen/LVypqJ?editors=001

 

However, i think this is less flexible and efficient once you start animating many elements in each slide.

Link to comment
Share on other sites

Now there are a few good options. Some to get the job done quick (for the memory paranoid) and Diaco's for a more robust solution which attaches TimelineMax instances to each slide. 

 

Thanks guys!

  • Like 1
Link to comment
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
  • Recently Browsing   0 members

    • No registered users viewing this page.
×