Refresh ScrollTrigger on Slick slider init

[DanielLav]

Hello! I am building a website using GSAP/ScrollTrigger and Slick Slider.

 

According to my idea, ScrollTrigger should remove the fear and move the object at the moment it appeared in the scope.

 

    function othersAnim() {
        tl.from('.bm-others__item', {
            ease: 'slow',
            opacity: 0,
            duration: 3.5,
            y: 10,
            stagger: .35
        }, "<")
      //Other tl here
    }

    let bmOthersTrigger = ScrollTrigger.create({
        trigger: '.bm-others',
        onEnter: othersAnim,
        start: 'top 70%',
        end: 'top 10%',
        once: true,
        scrub: true
    })

 

This works fine on the desktop version (since I don't use the slick slider there). But starting with browser window width of 639px I start using slick slider and run into a problem. (to check this you should use 639px width of browser window in codepen).

 

The issue is that ScrollTrigger doesn't apply timeline to my slides. (although it does set the from values I set). So my slides stay transparent and have a y: 70px offset. (But it works good on desktop).

 

This is due to the fact that the slick slider modifies the DOM tree and apparently the ScrollTrigger is already setting its values by this point.

I wrote a function that checks the init value of the slick slider. But don't know how to update my ScrollTrigger at this location.

 

    bmSlider.on('init', function (event, slick) {
        if ($(".bm-others__item").hasClass("slick-active")) {
            console.log(bmOthersTrigger)
            ScrollTrigger.refresh(true)
        }
    });

 

Can you help me with my problem? I'm taking my first steps in GSAP and I seem to be stuck.

Also I'm open to other solutions (but I definitely need to keep the slick slider in my project).

 

Here I add a codepen demo:

See the Pen MWBWgbJ by ProjectDCL (@ProjectDCL) on CodePen

[Cassie]

Hey there!

 

I've added some markers and a space to scroll into and it seems to be working a ok to me. Take a look and see what you think. If it's not what you're expecting - could you maybe explain what you're expecting to see?

See the Pen VwBwyOX?editors=0110 by GreenSock (@GreenSock) on CodePen

[DanielLav]

2 hours ago, Cassie said:

Hey there!

 

I've added some markers and a space to scroll into and it seems to be working a ok to me. Take a look and see what you think. If it's not what you're expecting - could you maybe explain what you're expecting to see?
 

 

Yes, it really works for you. I also did some manipulation and this solution started working for me on codepen. But I still run into a problem during project development in my build (ignoring the codepen).

 

While I was waiting for a response from you, I changed the animation from the value ".from" to ".to" value and now it works correctly.

But now if I resize from a width > 639px (where I don't have a slider) or vice versa, then I see a void.

 

This logic is only visible in my project, not on the codepen.

 

Can I send you an example of my site so you can have a look? I think that will make it clearer what I mean.

[GSAP Helper]

Unfortunately it's just too complex to try to troubleshoot live sites. Way too many factors involved, and things can't be tinkered with like in a CodePen/Stackblitz. I wonder if you're just using an old/stale version of GSAP in your project? What else is different between the CodePen demo and your local project? I'd recommend trying to get them to match as much as possible and then slowly add in variations to get it closer to your "real" project until it breaks and then you'll know where the issue is exactly. 

 

Of course we'd be happy to look at a minimal demo that illustrates the issue. 

[DanielLav]

55 minutes ago, GSAP Helper said:

К сожалению, это слишком сложно, чтобы найти решение неполадки на предполагаемых сайтах. Задействовано слишком много факторов, и с такими вещами нельзя возиться, как в CodePen/Stackblitz. Интересно, вы просто использовали старую/требуемую версию GSAP в своем проекте? Чем еще отличается демо CodePen от ошибочного проекта? Я бы порекомендовал приблизительные результаты так, чтобы они значительно снизили расходы на другого друга, а затем медленно включили варианты, чтобы приблизить его к вашему «реальному» проекту, пока он не сломается, и тогда вы точно узнаете, в чем проблема. 

 

Конечно, мы были бы рады подписчику на минимальную демонстрацию , иллюстрирующую проблему. 

No, I download the latest build from npm. Also, as a test, I tried to connect the latest version of GSAP and ScrollTrigger from CDN (The result is the same).

 

In fact, my solution differs only in that I use the Galp assembly (but I eliminated the factor of problems associated with gluing and other things by simply connecting the CDN for the test).

I also use images in slides instead of text as in the example.

 

Okay, I'll try to send a more detailed version soon.

[GreenSock]

10 hours ago, DanielLav said:

I also use images in slides instead of text as in the example.

I wonder if you're lazy-loading images so that when ScrollTrigger does its ScrollTrigger.refresh() on "load" of the page, those images aren't there yet, so the start/end values are off. And then when the images load, they shift the layout around (pushing things down) but you didn't call ScrollTrigger.refresh() to have it recalculate things accordingly. 

 

Make sure you call ScrollTrigger.refresh() AFTER your layout is settled.