Jump to content
Search Community

Poulpi

Members

  • Posts

    6

  • Joined

  • Last visited

 Content Type 

Posts posted by Poulpi

    Conflict between Gsap and Tiny Slider

    in GSAP

    Posted

    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?

    Conflict between Gsap and Tiny Slider

    in GSAP

    Posted

    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

    Conflict between Gsap and Tiny Slider

    in GSAP

    Posted

    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

×
×
  • Create New...