Jump to content
GreenSock

annam

reversing on recreated DOM

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 :)

 

I have a TimelineMax instance where i tween some properties. However I have some properties that I can't tween and require DOM recreation - for which I call as a function at the end of the timeline. I am basically building the whole DOM object again, with the new, tweened properties, and some extra changes, usually style-related, sometimes DOM-related.

 

Unfortunately this DOM recreation seems to break the reverse function of the Timeline.. Even though the HTML classes and IDs are still the same after the dom recreation, it seems that the timeline has the target DOM stored and can't find it on reverse?

 

Here's a jsfiddle: http://jsfiddle.net/annam/kgR5X/

 

If you comment out the .html() function you will see that reverse works.

 

What can I do to force the timeline to re-find the targets on reverse?

 

Hopefully there's a way around this.. Thanks so much!

 

Link to comment
Share on other sites

Yeah, as you suspect the tween's target still refers to the previous element.

You are creating an identical node... but it isn't the same one that the tween is referencing as its target.

 

The target property of a tween is read-only and currently there isn't a way to assign a new target.

 

Right now, just like you are re-creating the dom element you will likewise need to create a new tween (and or timeline) advance it to progress(1) and then reverse it.

 

I'm 99% sure this is the case but its possible someone may have a better idea.

  • Like 3
Link to comment
Share on other sites

Is it possible to do your DOM manipulation without reconstructing it as a string? I've adjusted your sample to show you can remove a DOM element and reinsert it again while maintaining the target for your tween.

 

http://jsfiddle.net/kgR5X/2/

  • Like 3
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.
×