Not applying to content that is hidden

[stardothosting]

I am trying to apply this on images that are in tabbed content where the parent selector is set to display:none until the tab is activated and the content is revealed.

The parallax effect does not seem to be applied to this content that is set to display:none when simpleParallax is executed but display:block when the parent selector is activated.

Is this a known issue? Is there a workaround that would be possible?

[geosigno]

This is the default behavior. The plugin uses the Intersection Observer API to check if the image is visible in the viewport, before proceeding with any calculation to apply the parallax.

Thanks to this, even if you have 100 images on the website, only the images visible in the viewport will proceed.

This is one of the reasons why simpleParallax is quite fluid :)

Try to use the customContainer param as a workaround and let me know.

[stardothosting]

Thank you for the additional information.

I tried setting customContainer to a common class name that is applied to these images :

var image = new simpleParallax(image_1, { customContainer: "image-class", });

But this error is then produced :

VM965 simpleParallax.min.js:7 Uncaught TypeError: this.settings.customContainer.getBoundingClientRect is not a function at i.value (VM965 simpleParallax.min.js:7) at i.value (VM965 simpleParallax.min.js:7)

Sidenote question : if I switch the system from display:none to visibility:hidden , will the library work in this case? Or is that not relevant.

[stardothosting]

Or is there a way to re-apply the simpleParallax on DOM on a click event perhaps?

[geosigno]

You should change your customContainer to “.image-class”. Let me know if that works.

[geosigno]

I assume this is working now. If not let me know.