Jump to content
Search Community

add tweens on timeline for DOM created in timeline

annam test
Moderator Tag

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

Hi all,

 

we'd like to build a complex timeline that does various DOM manipulation and animations and has both functions and tweens on it.

 

On the timeline, it first creates some DOM elements dynamically:

 

timeline.add(function(){
    $('#box').wrap('<div id="box-outer" />')
}, 1)

 

and then, later on in the timeline, we'd like to target that added DOM, to animate it:

 

timeline.add(TweenLite.to("#box-outer", 1, { background: 'red'}), 2)

 

This does not work, presumably because greensock tries to access and cache the DOM elements when we first create the timeline.

 

We have figured out a way to work around this issue by adding the tweens inside functions and not directly on the timeline, as below:

 

timeline.add(function(){
    timeline.add(TweenLite.to("#box-outer", 1, { width: 100 }), 2)
}, 2);
 
we add to the timeline from inside the function so that we can then have the animation on the timeline and it can be reversed, seeked etc. these are all things that we use.
 
Here is the jsfiddle for reference, just toggle the two solutions to see the difference: https://jsfiddle.net/annam/hfhb5gxr/2/
 
However, due to the nature of our project, we don't know when this DOM might be missing on timeline creation, and so we will need to add all tweens inside functions and not directly on the timeline. We are worried that this will have a heavy negative effect on performance. Can we have your input on this? WIll this have any other unexpected changes to functionality, eg seek, reverse and so on? 
 
I don't suppose there's a hidden setting somewhere that I haven't come across that we can change to have greensock re-search for the DOM element if it doesn't find it?
 
Also please note that this is the second time that we have come across this issue of needing to access newly - created dom: http://greensock.com/forums/topic/8348-reversing-on-recreated-dom/
 
Thank you!
Anna
Link to comment
Share on other sites

Yes that is a solution we were considering for the .wrap() scenario, to have the dom element somewhere else in the dom beforehand. However that is not the only possible DOM manipulation we may have to do. We'd like a solution that will work for any scenario we come across so that we don't have to individually examine and think of a workaround for every case.

 

Precreating but not attaching the dom element might be technically possible but it would require major rengineering of the code to get this working, and as I said, this is something that we might come across for more than one scenarios..

Link to comment
Share on other sites

Thanks for the demo and explanation of the challenges you are facing.

As you guessed the engine does search for the target of the tween when tweens are created, so creating an animation to be run in the future on an element that doesn't exist will cause problems.

 

 

We are worried that this will have a heavy negative effect on performance. Can we have your input on this?

So a solution appears to be creating DOM elements while an animation is running. This is usually discouraged as creating the element takes some work and injecting it into the DOM will force layout (bad). How much it really impacts performance and is noticeable to the user isn't something I can advise on. You may get away with it fine.

 

 

WIll this have any other unexpected changes to functionality, eg seek, reverse and so on? 

Yes. If you have a function in the middle of a timeline that creates a DOM element you are going to have to be careful about removing it. Each time the playhead passes over that function it will be called and a new DOM element will be created. I imagine this could be quite bad.

Be sure to see Blake's solution to calling a function only once from a timeline: http://greensock.com/forums/topic/14939-once-callback/?p=64565

 

I don't suppose there's a hidden setting somewhere that I haven't come across that we can change to have greensock re-search for the DOM element if it doesn't find it?

Unfortunately, no. If we can think of a way to potentially delay the searching or re-search at play time we will let you know.

  • Like 1
Link to comment
Share on other sites

Hi Carl,

 

thanks for the reply,

 

actually, in both questions I was referring not the the creation of the DOM element, but to adding the tween to the timeline through a function and not directly, thus by-passing what I suppose are greensock's performance optimisations.

 

Though of course we understand the consequences of changing the DOM during the animation..

 

Thanks!

Link to comment
Share on other sites

Oh, sorry. I wouldn't worry much about adding tweens using functions called by a timeline. Very little overhead to create a tween. Once the tweens are in the timeline you will gain all the benefits of seekig, reversing, etc. 

 

I don't know the full scope of you app so the true or noticeable performance issues will only be revealed through testing. I suspect though that you will be ok.

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.
×
×
  • Create New...