Animation does not work with http get method

[MarcFN]

Hello dear Greensock team,

I have the following requirement.

There is a lot of content on one of the client's page. Therefore I want to reload certain content via HTTP GET.

But the reloaded content contains an animation. But this animation is not working.

Generally, when the page is loaded, it looks for the animations. But the animation which is not loaded yet can not be found. I have understood this as far as it goes.

If I now call the additional code for the animation that is loaded with the HTTP GET call, then the animation works.

The problem is now that after the loaded content, further down still animations take place. These are also pinned. But these animations do not know that another content has been added and that they should start much later. I tried it with refreshTrigger() and ScrollTrigger.refresh(), but it doesn't work.

It is a bit complicated to explain. Is there a demo for this?

Best regards from Lake Constance,

Marc

[Rodrigo]

Hi Marc,

 

Sorry to hear about the troubles 😞

 

Unfortunately without a minimal demo there is not much we can do. We understand also that given the unique situation you're dealing with a demo is a bit hard to create. There are a few things that caught my attention from your post though:

25 minutes ago, MarcFN said:

But the reloaded content contains an animation. But this animation is not working.

I don't really follow this. You mean that the content you're getting from the server response has both HTML and JS in it, with some GSAP instances in the JS? Or you're just getting the HTML and the animation code is on a JS file that already is loaded in the client?

 

In order to tell ScrollTrigger that new content has been added and that it has to run it's calculations again, calling ScrollTrigger.refresh() is the way to go. This should be executed after the response from the server and after the DOM has been updated. You should find a way to know that the DOM is updated with the new content before calling the refresh method.

 

Perhaps the new content you're getting has images that are not loaded yet when you call the refresh method? If that's the case either give those images a fix height or add some code to check when all the images are loaded and then call ScrollTrigger.refresh(). This is the closest I can get to a working example of this approach:

See the Pen YzJLMaX by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!