Infinite image tickers

[Afplaktape]

How can I make sure these tickers will loop infinite without showing whitespace before or after when the animation is playing?

See the Pen mdoJOWo by Afplaktape (@Afplaktape) on CodePen

[Toso]

I'm not sure what you are trying to do here but you can use the seamlessLoop  https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop#demo 

and for the space between them  you will remove this column-gap: 2rem;  and may use paddingRight in the loop config 

[Afplaktape]

I'm trying to make them move smoothly and automatic like the codepen example but I don't want there to be moments where there are no images in the viewport. Not as a carousel or slider

[Rodrigo]

Hi,

 

As @Toso suggests the best course of action is the Horizontal Loop helper function. Here is a fork of your demo:

See the Pen vYPOmMo by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Afplaktape]

Is there a way to make sure there are no whitespaces on the left and right before the images is loaded?

[Rodrigo]

6 hours ago, Afplaktape said:

Is there a way to make sure there are no whitespaces on the left and right before the images is loaded?

Hi,

 

I'm not sure I understand what you mean with this. Right now your CSS has this:

.ticker_top,
.ticker_middle,
.ticker_bottom {
  display: flex;
  column-gap: 2rem;
  row-gap: 2rem; /* WHY IS THIS NOT WORKING? */
  grid-row-gap: 2rem; /* WHY IS THIS NOT WORKING? */
}

That basically creates a separation between the child elements of all those containers, which are the three containers you're using for this. If you remove those gaps properties you'll get no space between images:

See the Pen vYPOmMo by GreenSock (@GreenSock) on CodePen

 

Happy Tweening!

[Afplaktape]

I'm sorry that I wasn't able to explain it correctly and the best wishes for the new year of course!:) 

 

The problem occurs on the right side of the screen as seen in the gif below. Do you know how to solve this to make it a smooth animation?

Thanks for you help so far!

[GreenSock]

I don't quite understand your question, but keep in mind that in order to have a seamless loop, you'd of course need to have enough of the elements to fill the screen plus some extra so that as it goes out of the screen on one side, there's not a gap on the other. That's just a logic thing - one element cannot possibly exist on both the right side and the left side at the same time.

 

If you still need help, please make sure you provide a minimal demo that clearly illustrates the issue and we'd be happy to take a look.  

[Afplaktape]

Thanks for the help so far! I've made some changes and a lot of what I'm trying to achieve is working now.  The top and bottom one are behaving the way they should but there is still something going on with the middle one and I can't figure out what the problem is here. 
1. Although there are enough images in the loop it still shows a open space on the left. 
2. The margin between the images is not equal and sometimes images are overlapping.

 

Could you please have a look and see where I'm going wrong?

See the Pen mdoejVN by Afplaktape (@Afplaktape) on CodePen

[Rodrigo]

Hi,

 

Honestly I have no idea what could be the problem here. I made a short screen recording and as you can see the element is being animated properly, but for some reason I can't seem to grasp is not visible at certain point. I tried adding will-change: transform and playing with the overflow property of each image without any luck:

https://i.imgur.com/cJcvJDx.mp4

 

Finally when working with images, always wait for all the images to be loaded before creating the Horizontal Loop, that way you'll avoid the overlapping problems:

window.addEventListener("load", () => {
  const loop = horizontalLoop();
});

 

Sorry I can't be of more assistance on this but I've never seen an issue like this with the Horizontal Loop helper function 😞

Happy Tweening!

[Afplaktape]

Hi Rodrigo, 

I've added the code provided but it is still adding more space between the images in the middle loop.  Is there a way to "center-align" all the loops so that if an image "falls off" on one of the sides, it's not visible on the screen. Is there a different way to create this effect without the use of horizontal loop since I need it for the project?

If I comment out the reverse, there is still a different margin between the first and last element of each loop:

See the Pen mdoejVN by Afplaktape (@Afplaktape) on CodePen

Thanks in advance!

[GreenSock]

that's what the "paddingRight" feature is for in the helper function - it represents the number of pixels of extra space you want to put on the right side of the loop, so that it places the looping element the right distance from the end. I set box-sizing: border-box to simplify things, and computed your margin value in this fork: 

See the Pen MWxjxLy?editors=0110 by GreenSock (@GreenSock) on CodePen

 

Is that what you're looking for?