Search the Community
Showing results for tags 'inherit'.
Found 1 result
-
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!
