Looping Slider

[pOri_A 0 Likes (Newbie)]

hey guys
I have a problem with my slider I want to create a looping slider but as you see in codepen it is not working 
thank you and sorry for my low level Problem

See the Pen pobzVze by perada (@perada) on CodePen

[ZachSaucier 7,152 Likes (Superhero)]

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:

 

[pOri_A 0 Likes (Newbie)]

hey  @ZachSaucier thank you for your advice 

I update my code to Gsap3 but my problem is I don't want to use position absolute in my box but all the example in that topic are using position absolute 
can you help me about this issue?

See the Pen pobzVze by perada (@perada) on CodePen

[ZachSaucier 7,152 Likes (Superhero)]

6 hours ago, pOri_A said:

I don't want to use position absolute in my box

Why not? It makes things easier and more performant.

 

The core concept is the same if you use non-absolute elements. But you need to compensate for each element's starting position.

[pOri_A 0 Likes (Newbie)]

I cant find how to do that ... But thanks for your help

[mikel 4,775 Likes (Superhero)]

Hey @pOri_A,

 

//CSS

.wrapper .box{
  position:absolute;
  ...
}
  
// JS: position the boxes
gsap.set('.box', {
  x:function(i) {
    return i * boxWidth;
  }
});

 

See the Pen rNLBKYX by mikeK (@mikeK) on CodePen

 

Happy looping ...

Mikel

[pOri_A 0 Likes (Newbie)]

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")
    

 

[mikel 4,775 Likes (Superhero)]

Hey @pOri_A,

 

You mix old and new syntax for stagger - please study the DOCS.

And here is an example of how a stagger animation could be integrated at the beginning.

 

See the Pen VwjLVqW?editors=0010 by mikeK (@mikeK) on CodePen

 

Happy looping ...

Mikel

[pOri_A 0 Likes (Newbie)]

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)

[mikel 4,775 Likes (Superhero)]

Hey @pOri_A,

 

You could try an onUpdate like this

 

See the Pen 0657089a2341ebf60f702661cbf082d3?editors=0010 by mikeK (@mikeK) on CodePen

 

Happy speeding ...

Mikel

[pOri_A 0 Likes (Newbie)]

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?

[mikel 4,775 Likes (Superhero)]

This could be an option - but I am not convinced of it.

 

See the Pen 91bed456efff0e73763c246518525131?editors=1010 by mikeK (@mikeK) on CodePen

 

 

[pOri_A 0 Likes (Newbie)]

Thank You Dear @mikel your answers are very helpful