Jump to content
Search Community

Looping Slider

pOri_A test
Moderator Tag

Go to solution Solved by mikel,

Recommended Posts

Hey pOri_A and welcome to the GreenSock forums.

 

We highly recommend that you upgrade to GSAP 3. The GSAP version that you're using is really old! GSAP 3 has a smaller file size, a sleeker API, and a bunch of new features. It's easy to upgrade, just follow the migration guide.

 

In terms of doing an infinite loop like that, you should check out this thread which covers the details of how to do this sort of thing:

 

  • Like 1
Link to comment
Share on other sites

hey @mikel thanks for your clear example

but is there any way to use some stager before slider make move?

I used this cod before but with position: absolute  its not working 

var tl = gsap.timeline();

tl.fromTo(".box",{x:1900,y:-400},{duration:1.5,x:0,stagger:0.1})
    .staggerTo(".box",1.5,{y:0} ,0.2,"-=0.4")
    

 

Link to comment
Share on other sites

  • 1 month later...

thank you @mikel for your solution

can you help me with this problem??
Im looking for a way to mix this slider with scroll trigger when we scroll down slider move faster
i have try to do something like this but its not working and obviously its wrong.. 
can you help me how to use scroll trigger here with auto play slider

.to(no01,  {x: dirFromRight,
    
    modifiers: {
        x: x => mod(parseFloat(x)) + "px",

    },
    duration:time,
    ease:'none',
    repeat:-1,
    scrollTrigger:{
        trigger:'.landing-wrapper',
        start:'top top',
        end:'bottom center',
        markers:true,
        scrub: 1
    },
},1)
Link to comment
Share on other sites

hey @mikel I'm very glad that you spend your time for this issue

I update your cod to something like this

onUpdate: self => {
        if (self.direction > 0 ) {
            console.log("velocity: "+ self.getVelocity());
            let velo = self.getVelocity();
            let speed = velo*0.01;
            if (speed > 4){
                speed = 4;
            }
            else if (speed < 1 ){
                speed = 1
            }

            console.log("speed: "+ speed);
            action.timeScale(speed)
        }
    }

that try to move slider when scroll down but the problem is when I stop scrolling I want slider keep moving with minimum speed not last velocity 
I try to use this code but its not working
 

ScrollTrigger.addEventListener("scrollEnd", function() {
  master.duration(2).play();
});

 

** And is there any way to make slider move Smother when we scroll down?

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.
×
×
  • Create New...