Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
celli

Clearprops with SVG elements

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

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

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.
×