How to push element's furthur to animate new element?

[Sajidul Islam]

Hi,

 

I want the previously animated items to continue moving towards the left as new items are animated. I've created a demo where all of the repeated item's are animating on the same place.

 

What I want is, first scroll should move an element by 315px(element's width) and when user scroll's again, previous item will add more 315px to move it left and new item will appear their.

 

 

Any help would be appreciated.

 

 

Many Thanks,

Sajidul

See the Pen VwgELom by sajidulislam0 (@sajidulislam0) on CodePen

[Toso]

something like that?

 

See the Pen LYqgGZm?editors=0010 by ahmed-attia (@ahmed-attia) on CodePen

 

here I used object keyframes but you can read more about keyframes here It is very flexy

 

https://gsap.com/resources/keyframes

[Sajidul Islam]

Hi @Toso,

 

Thanks for the pen. It's almost there. Except, I want to previously animated item to be pushed at the same time new item is animating. How can I do it?

 

[Toso]

i updated the pen set the delay to .1 refresh it , also you can tweak the stagger and delay more if you need different result 

[Sajidul Islam]

@Toso

 

Thanks for the update, Now if you see, my expected output is when you first scroll. but after that it's not pushing more left/continuously when the new item are animating. It's only happening for the first scroll. I just need it to be keep continuing.

[Toso]

from this point you can do anything like want them to move another 315px ? just add another object inside the keyframes as i just did you can check it when you refresh, also since you gonna add more objects in the keyframes you can better remove the delay so you don't keep editing all the delays and stuff you can check the other keyframes methods also in the docs its amazing

 

 

also, i added a small rotation at the end so you can start imagining what you can do with these keyframes

 

 

almost forgot you can also move them with xPercent will serve better here since it is relative to the element width so you don't need to edit the x value after for example making this logos smaller or bigger 

[Sajidul Islam]

@Toso

 

Wow, this is what I wanted. Just one this, Is it possible to stop animating if the item is last item? Something, I did on my pen initially?

[Toso]

not sure what you mean, do you want to keep the last one inside the viewport after all have already gone outside the viewport?  something like this one ? i kept the old pen as it is so we don't conflict with the ideas here 
 

 

See the Pen QWYZKdj?editors=0010 by ahmed-attia (@ahmed-attia) on CodePen

 

[Sajidul Islam]

@Toso

 

If you see the item keeps moving even though there are no element's left to animate. I want to stop the animation(pushing left) if there are no item's left.

 

In this image, you see the item's are keeps scrolling. But I want it to be stopped if this is the last item (.block-single)

 

[Toso]

yes and no, yes it can be done and you can pause but i think with the current setup it will be paused while some of the elements are in the middle of their animation or something that if I'm getting it right 

 

[Sajidul Islam]

Thank You!