Gsap Trigger location problem with Owl Carousel

[S3BASTIAN]

Hi everyone and thanks in advance!

I had this problem a few months back and now I'm having the same problem again. I use to work with this Owl Carousel for the websites I work with, and when combining the Owl Carousel with Gsap, the Star and End triggers are placed in different locations than they should.

On the websites I made, the Start is located wayyyy downwards. In this example it's upwards. I guess that Gsap is making all the calculations before the images are placed. I thought that with ScrollTrigger.refresh(); it should solve this but I guess it's for another case.

Again, thanks in advance!

Sebastian

See the Pen oNJZNaE by soporo123 (@soporo123) on CodePen

[alig01]

Hey,

 

just from a quick look, Owl initial css is display: none, when you create your effects, there is no space reserved for your images. That's why it looks like the markers are out of place.

Quote

Instead, ScrollTrigger does the processing up-front to figure out where the start/end points are in the natural document flow.  documentation

 

So you need to make sure you call ScrollTrigger.refresh(); after the CSS changes from owl (it overrides display: none to display: block)  happen.

 

Unfortunately I've never used jQuery so I can't tell you where would be the right place to do that. But putting it inside the ready() method after you initialize your Owl carousel seems to work.
You could also check if there are suitable events provided by Owl, something like "afterInit" that you could listen on.

 

Hope this helps and good luck with your project

[Toso]

There are some callbacks that might help like ( onInitialized ,  onLoadedLazy )  

https://owlcarousel2.github.io/OwlCarousel2/docs/api-events.html