Clearprops with SVG elements

[Surge]

I have had an issue recently where the timeline skips over some of the .to() animations. This only when it repeats itself. The first time the timeline runs it does the full timeline in order correctly.

 

I want to see if i can get a more simple code pen put together to show this.

[Surge]

Here is a code pen: 

See the Pen jqpNmX by chrissowerby (@chrissowerby) on CodePen

The first time the timeline runs you will see the iframe get moved up. There is a .to() animation that moves the iframe up by animating its y value.

 

After the timeline repeats this no longer happens. 

The iframe does get loaded in and i can see it in the dom but its as if the timeline skips over the .to() animation properties.

I have also added a onComplete function to the .to() animation with a console.log within the callback function.

 

I can see that the callback function does get called but the animations y properties do not get changed.
Thanks.

[Carl]

Hi surge,

 

I'm a little confused why you posted in this thread about clearProps. Its best to start new threads for new issues.

 

I think the issue is that you are creating tweens on ".desktop_iframe"

 

but then you remove that element with

$(".desktop_iframe").remove()

and then create a new element with the same class

 

and then expect the tween to work the next time its timeline plays again.

 

Your tween is recording a reference to a DOM element when you create the tween. Adding a new element with the same class as your target does not update the tween.  

 

Make sense?

 

If I'm wrong about what you are doing, please try a simpler example as I had some trouble following it.

[Surge]

ok thanks.

i didn't know it works like that.

 

i was thinking that the timeline would see the new dom element because the iframe has the same class name as it did have the first time it was added to the dom (before the removal onRepeat).

 

so how would i tell the timeline to track the new element? i was hoping that using the exact same class would be enough.

[Surge]

hmmm ok now i think of it i can remove the iframes src attribute and re add it. this should have the same effect as completely removing the element from the dom.... Hopefully.

 

i just need it to reload the iframe you see.

[Carl]

so how would i tell the timeline to track the new element?

 

 

The timeline does not monitor the adding and removal of DOM elements. One option is to give the iframe a parent element and tween the parent. Your idea of changing the src should work too.