Jump to content
Search Community

Animating Dynamic Loaded Content - Animation slows down after each 'round'

redrooster 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,

 

I was wondering if you could help me out - here is my codePen:

 

 

This pen simulates the real-life issue I am having using Ajax, except for demo purposes I am using '.append()'

 

I have been as descriptive as possible in the pen to articulate the specific issue, but I will explain again here:

 

  1. I need to animate an ajax-loaded article on button click 'open'
  2. I realise that the loaded content will not be seen by the TL if I declare my variables pointing to these elements on page-load, therefore I am tying the 'master.add(...)' when the button is clicked / ajax content is available in the DOM.
  3. The pen works, the loaded content is indeed added to the page, and it animates as expected ONLY on the first play / close.

 

If you click play, and then close a few times in the pen you will notice the animations still plays, but there is a progressively longer gap between each stage of the animations.

 

Is it because on each 'open' click I am again adding to the master, and it is getting 'clogged' up? If so what should I do to clear the 'master.add(...)'?

 

I have done a LOT of googling :) but I cannot find an answer, and I think I have gone in a big circle of pain. 

 

...awesome product btw (when I can make it play ball ;))

 

Thanks in advance if you can help.

 

Also - is there a better // more practical method to my code setup for this in general? It would be awesome for a GSAP Jedi to offer me advice - Im always looking for ways to improve how I approach things.

 

 

 

 

See the Pen KNgdxL by marklawrencedesign (@marklawrencedesign) on CodePen

Link to comment
Share on other sites

Don't worry about a master timeline if you don't need one. Just create your animations after your content has loaded. Here are some examples using SVG, but it's the same process for regular HTML. If you want to crate an ajax demo, use Plunker instead of CodePen.

http://plnkr.co/edit/5l2al3EPl9HIK2FQgO2C?p=preview

http://plnkr.co/edit/IWTAV5jIxzSioTpj8UkJ?p=preview

  • Like 1
Link to comment
Share on other sites

Blake is right about not really needing a master timeline in this scenario, but let me explain why you're getting the current behavior just so you understand...

 

The first time, everything is fine. You've got two 0.5-second tweens in your timeline (well, nested in timelines within master). Great. 

 

Then after reversing all the way back to the beginning, you remove the actual .box2 element but you didn't remove the corresponding tween in the timeline, thus it is still taking up space there (master.duration() is still 1). 

 

The next time you click, you add ANOTHER (duplicate) animation of .box1 to the end of the timeline, animating x to 200 again, as well as an animation of .box2. So let's recap where we're at now: 

 

- .box1.x > 200 (works)

- .box2.x > 200 (this .box2 was removed from the DOM, thus you won't see anything happening during this 0.5 seconds)

- .box1.x > 200 (duplicate) (since the first tween already got it to 200, this tween doesn't really do anything)

- .box2.x > 200 (works)

 

Notice you've got 1 full second in the middle where nothing is really visually happening on the screen. 

 

And the more times you click, the more stacking you're doing in the timeline, creating redundancies. 

 

Here's a fixed version of your codepen:

http://codepen.io/anon/pen/rWMWXP?editors=0010

 

I used a variable to keep track of the .box2 animation so that it could be killed when you remove the DOM element. There are a bunch of ways you could build this, but I tried to keep it as similar as possible as what you had.

 

By the way, you can pass selector text directly in as the target to your tweens. Might make your code more concise. 

 

Does that clear things up? 

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