ScrollSmoother Parallax effect on ajax loaded content/imagery

[callmegoon]

I haven't figured out a good way to create a minimal demo because my issue involves content that is loaded via ajax using the Wordpress plugin Ajax Load More.  That said, I thought I'd try to explain the issue in words.  If it makes no sense - ignore me!

 

Problem:

Parallax effect (data-scroll="0.9" for example) does not seem to work on content loaded via ajax.

Here is a page, for example (the images, which are actually little video thumbs) should have a parallax effect on them (like they do on the home page here.)

 

Attempted Solve(s):

First, I'm initiating the ScrollSmoother (so that it works and fires sitewide).

Next, I'm using a callback provided by Ajax Load More (almComplete) to fire a "ScrollTrigger.refresh();" once the ajax content has completely loaded.

However, it is not initiating the parallax effect on the image/video thumbs that were added via ajax.  I've also put it inside a setTimeout of multiple seconds, and it doesn't seem to fire.

 

What does work:

What's interesting is that if instead of firing ScrollTrigger.refresh() in my ajax callback function, I reinitiate ScrollSmoother with...

let smoother = ScrollSmoother.create({
  smooth: 1,               
  effects: true,           
  smoothTouch: 0.1,
  normalizeScroll: true
});

...then the parallax effects work!

 

In all my reading, it seems that ScrollTrigger.refresh() should refire everything related to ScrollSmoother, but it doesn't seem to be working in this instance.  Is there a different/better approach? Or, any thoughts as to why that order of events wouldn't refresh/fire my parallax elements?

 

As noted, I can get it working by using the method above of creating a smoother within my callback, but that feels wrong, so hoping to figure out what I'm doing wrong.

 

Thanks!

 

[GreenSock]

5 minutes ago, callmegoon said:

In all my reading, it seems that ScrollTrigger.refresh() should refire everything related to ScrollSmoother, but it doesn't seem to be working in this instance.  Is there a different/better approach? Or, any thoughts as to why that order of events wouldn't refresh/fire my parallax elements?

When you call ScrollTrigger.refresh(), that just goes through all the existing ScrollTriggers and re-calculates their start/end positions. 

 

When you create a ScrollSmoother instance (assuming you set effects: true), it checks the DOM for any elements that have the data-speed or data-lag attribute and then creates ScrollTriggers internally for those which drive the effects.  But if you then later (like with your AJAX call), you add new DOM elements that have those attributes, there's no way for ScrollSmoother to automatically know that you did that so that it can then create the necessary ScrollTriggers for those for driving the effects. So the behavior you're seeing totally makes sense. 

 

We try to make our tools very flexible...so there's a pretty easy solution here. There's an effects() method that acts as both a getter and a setter. 

// if you know which elements you're adding, you can just feed them in:
smoother.effects([...Array of elements or selector text...]); // by default, it'll look for data attributes and use those values, but you could provide a config object with specific values to override if you want

If you don't have a clean way of knowing which elements you've added, you could nuke all the old ones and re-create everything based on the current DOM: 

// get and kill all the existing effect ScrollTriggers
smoother.effects().forEach(t => t.kill());

// re-parse the DOM and set up effects accordingly. Just pass in selector text for the elements that should have effects
smoother.effects("[data-speed], [data-lag]");

Does that clear things up? 

[callmegoon]

Totally - appreciate it!