Jump to content
GreenSock

Poulpi

Conflict between Gsap and Tiny Slider

Recommended Posts

Hello all and thank you for this wonderful plugin! I am using it in a project. You can see the result here:
https://staging-wpwa-digital.wpwa.de/de/agentur/


So on the top I have an animation using Gsap and Scrolltrigger. At the bottom of the page I have a slider using Tiny Slider which should be moving. It seems that when the animation on the top is present on the page, it bugs the slider. I've tried several things like unpinning the Gsap animation. When it is unpinned everything works fine. Since my knowledge in this domain are not that huge, does anyone have an idea or a track I could follow to find/fix the issues?

 

Many thanks!

See the Pen by de (@de) on CodePen

Link to comment
Share on other sites

  • Poulpi changed the title to Conflict between Gsap and Tiny Slider

Quick update. I've used a Callback onComplete to initialize the slider when the animation is over. But then the padding from the pinSpacer is create a huge amount of white at the end of the page

 

Link to comment
Share on other sites

Welcome to the GSAP forums @Poulpi

 

Since I had an assumption on what that might be related to, I threw together some minimal demos on the issue you are having with just the relevant JS code of yours (from before you made that second post), I hope that is okay. Please keep in mind that generally it is out of scope for these free support forums to expect people to troubleshoot websites, as there is way too much involved with that - especially if there also are other 3rd party libraries in play.

 

I believe since you were going for that non-pin-spacer-showing pinning type of effect, you were pinning the body, right? ...which would create a pin-spacer with everything on the page being inside of it. It appears that in that case the tiny-slider at the bottom will not be running - which makes me wonder, because the one just below the header looks like it is running just fine.

 

Generally, I personally would advise on not pinning the body (although I do not know what exactly they were, I remember I had it come with side-effects once) - it will probably be better to create a wrapper around your content and pin that wrapper instead, if you can.

 

If you wrap ALL of the content and pin the wrapper, the problem will still persist, which you can see in this pen - the slider  further down the page won't auto-run.

 

See the Pen oNGOzNq by akapowl (@akapowl) on CodePen

 

 

You can work around that by only wrapping (and then pinning) specific parts (which might be visble at some point) for that non-pin-spacer-showing pinning type of effect, like here. As you can see, now the slider auto-runs.

 

See the Pen jOGRMBq by akapowl (@akapowl) on CodePen

 

 

I'm afraid I can not give you a porper explanation for the why of this happening, because I have no idea how exactly tiny-slider operates, but maybe give the suggestion above a try on your actual page and see if it does resolve things for you.#

 

 

 

Just some little sidenotes (since you have those things in your code): 

 

If you don't have any actual animation associated with a ScrollTrigger but are merely just using it for pinning e.g., you could just use ScrollTrigger.create() instead of hooking the scrollTrigger to a timeline.

 

toggleActions and scrub will not work together / on top of each other - if you have both set, the scrub will always take control. They actually are two different ways of controlling tweens/timeline with a ScrollTrigger.

 

And lastly, there also isn't a repeat property on ScrollTriggers, as far as I know.

 

 

I hope this will help. Happy scrolling!

 

 

Edit:

I really think it must be something with how tiny-slider works, because the funny thing is, in the iframe preview here and in editor-view on codepen, in both of the versions above, the slider appears to be working. But if you take a look in debug-view (without the codepen stuff around), the first of those will not work.

  • Like 1
Link to comment
Share on other sites

Many many thanks for taking the time to answer. This is really helpful and awesome.
I'll try to switch to another to see it the problem occurs with something like Slick. Just to play around.

 

I understand the problem with pinning the body. The only problem I have is that if I pinned for exemple the class frame-type-wpwa_ce_agency_history which is the wrapper of the element, the pin isn't working and the content under the pin scroll in background.

 

20 minutes ago, akapowl said:

If you don't have any actual animation associated with a ScrollTrigger but are merely just using it for pinning e.g., you could just use ScrollTrigger.create() instead of hooking the scrollTrigger to a timeline.

what do you mean exactly? Defining globally the timeline with the options, but using create() on breakpoints?

 

 

21 minutes ago, akapowl said:

toggleActions and scrub will not work together / on top of each other - if you have both set, the scrub will always take control. They actually are two different ways of controlling tweens/timeline with a ScrollTrigger

Understood! I need the scrub here. I've removed the other part.

 

22 minutes ago, akapowl said:

And lastly, there also isn't a repeat property on ScrollTriggers, as far as I know.

Is there any way to make the animation persistent after it is over? Using .pause()? 

 

More globally, how do you deal with 2 timelines (depending on the breakpoints). Is it better to define 2 timelines and kill one or the other depending on the breakpoint? What is the best practise here?

 

Once again, many many thanks for your time

Link to comment
Share on other sites

23 minutes ago, Poulpi said:
47 minutes ago, akapowl said:

If you don't have any actual animation associated with a ScrollTrigger but are merely just using it for pinning e.g., you could just use ScrollTrigger.create() instead of hooking the scrollTrigger to a timeline.

what do you mean exactly? Defining globally the timeline with the options, but using create() on breakpoints?

 

😅 ...nah, please excuse that part - my brain must be in desperate need of coffee. For whatever reason, I thought you don't have any tweens associated to that timeline - despite the many many tweens you are obviously adding to it. That was just me, sorry.

 

 

 

23 minutes ago, Poulpi said:

Is there any way to make the animation persistent after it is over? Using .pause()? 

 

If you mean the scrubbing animation should only work once for the very first time you scroll down, but then not anymore when you go back up, you could take a look on these threads - they have some examples for how to deal with that.

 

 

 

 

 

23 minutes ago, Poulpi said:

More globally, how do you deal with 2 timelines (depending on the breakpoints). Is it better to define 2 timelines and kill one or the other depending on the breakpoint? What is the best practise here?

 

ScrollTrigger does have an immensely helpful .matchMedia() method that you'll want to take a look at for handling different ScrollTriggers for multiple viewports.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()

 

 

 

  • Like 1
Link to comment
Share on other sites

Once again many thanks for your time!

 

I was able to go further with this code

 

gsap.registerPlugin(ScrollTrigger);


ScrollTrigger.matchMedia({
    "(min-width: 1024px)": function(){
        let tl = gsap.timeline({
            scrollTrigger: {
                trigger: ".frame-type-wpwa_ce_agency_history",
                pin:".frame-type-wpwa_ce_agency_history",
                end: "=+2900",
                start: "top top",
                // once: true,
                scrub:true,
                onLeave: function(self) {
                    // self.scroll(self.start);    // <-- sets position to start of ScrollTrigger
                    self.disable()
                    self.animation.progress(1)
                }
            }
        })
        tl.add('scene1');
        tl.to("#star", {autoAlpha:1, duration: 2}, 'scene1');
        // tl.to("#disquette", {autoAlpha: 1, duration: 1}, 'scene1');
        tl.to(".code", {autoAlpha: .2, duration: 1}, 'scene1');
        tl.to("#first-website", {autoAlpha: 1, duration: 2});
        tl.add('scene2');
        tl.to("#first-website", {autoAlpha: .2, duration: 1}, 'scene2');
        tl.to("#wpwaishere", {autoAlpha: 1, duration: 2}, 'scene2');
        tl.add('scene3');
        tl.to("#wpwaishere", {autoAlpha: .2, duration: 1}, 'scene3');
        tl.to("#team", {autoAlpha: 1, duration: 2}, 'scene3');
        tl.add('scene4');
        tl.to("#team", {autoAlpha: .2, duration: 1}, 'scene4');
        tl.to("#services", {autoAlpha: 1, duration: 2}, 'scene4');
        tl.add('scene5');
        tl.to("#services", {autoAlpha: .2, duration: 1}, 'scene5');
        tl.add('scene6');
        tl.to(".code", {autoAlpha: 0, duration: 1}, 'scene6');
        tl.to("#first-website", {autoAlpha: 0, duration: 1}, 'scene6');
        tl.to("#wpwaishere", {autoAlpha: 0, duration: 1}, 'scene6');
        tl.to("#team", {autoAlpha: 0, duration: 1}, 'scene6');
        tl.to("#services", {autoAlpha: 0, duration: 1}, 'scene6');
        tl.to("#star", {autoAlpha:0, duration: 1}, 'scene6');
        tl.to("#parallax-headline", {autoAlpha:1, duration: 2}, 'scene6');
    },
    "(max-width: 1024px)": function(){
        let tl = gsap.timeline({
            scrollTrigger: {
                trigger: ".frame-type-wpwa_ce_agency_history",
                pin:true,
                start: "top top",
                end: "+=600%",
                scrub:true,
                toggleActions: "play none none none",
                onLeave: function(self) {
                    // self.scroll(self.start);    // <-- sets position to start of ScrollTrigger
                    self.disable()
                    self.animation.progress(1)
                }
            }
        })
        tl.to(".code", {autoAlpha:1, duration: 2});
        tl.to("#star", {autoAlpha:1, duration: 2});
        // tl.to("#disquette", {autoAlpha:1, duration: 2});
        tl.to(".fade-out", {autoAlpha:0, duration: 1});
        tl.to("#first-website", {autoAlpha:1, duration: 2});
        tl.to("#first-website", {autoAlpha:0, duration: 1});
        tl.to("#wpwaishere", {autoAlpha:1, duration: 2});
        tl.to("#wpwaishere", {autoAlpha:0, duration: 1});
        tl.to("#team", {autoAlpha:1, duration: 2});
        tl.to("#team", {autoAlpha:0, duration: 1});
        tl.to("#services", {autoAlpha:1, duration: 2});
    },

})

So at the end I have a nice timeline depending on the media query, the animation is also paused at the end so the animation happens only once on the first down scroll. That is perfect! I've also removed the pin from the body and applied it to the wrapper of the element. So that solves the problem with the slider. But now the elements on the rest of the page are scrolling in the background. Shouldn't pin block the scroll until the animation ends? Or do I misunderstand something?

Link to comment
Share on other sites

Ok got it I missed

pinSpacing: true,

works like a charm

Link to comment
Share on other sites

Great, that you got it working! :) 

 

Be careful with the media-queries though;

as it stands now, when the viewport width is exactly 1024px you will technically be creating both of those.

 

Better make sure, the sizes don't overlap at some point, like maybe

 

...

"(min-width: 1024px)": function(){
  ...
},
  
"(max-width: 1023px)": function(){
  ...
}
...

 

  • Like 1
Link to comment
Share on other sites

that's true!

 

Once again many thanks for all your support!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×