How to create an infinite loop logo / images marquee

[knut_studio]

Hello!

I have done this in the past with Motion.page, but now I am struggling to recreate the same effect with Bricksforge Timelines.

What I would like to create is an infinite horizontal loop effect with a series of images.

The HTML structure is like this:

<section class="photo-carrousel">
    <div class="photo-carrousel__block">
        <div class="photo-carrousel__grid">
            <img>
            <img>
            <img>
            <img>
            </div>
        </div>
        <div class="photo-carrousel__grid">
            <img>
            <img>
            <img>
            <img>
            </div>
        </div>
   </div>
</section>

.photo-carrousel__block has a display flex, flex-direction of row. Overflow of hidden.

.photo-carrousel__grid has a width of 100%.

So far, so good! Everything looks as expected.

Then, I go to Bricksforge > Timeline and I have created an animation for the .photo-carrousel__grid to translate X axis to -100%, repeat -1, duration of 20s.

The thing is that when the 2nd grid gets to -100%, then the first grid resets to its initial position, which make a “glitch” effect, not a smooth infinite horizontal loop.

As I said, I made this animation several times with Motion.page before. Following this tutorial. But now, I am trying to make it using Bricksforge, and I am not sure why the behavior is different, even following the exact same steps.

Anyone have any idea?

[manc]

I used to this by loading the splide slider myself and adding the autoscroll extension → Auto Scroll - Splide

Just had a look and it seems there is a way simpler way by just overriding the transition property of the slider → https://www.youtube.com/watch?v=vG4e-Mmhebs

Unless you really need to do it using a timeline, those options might be more straightforward. Then again it might just be one tiny setting missing for the timeline option to work haha but can’t think of any rn.

[knut_studio]

Hi @manc

Thanks for your help!!

However, the way you are approaching this is using a slider element. I also have done this in the past, with the Splide’s Auto Scroll, and it is a good solution, too!

But, this time I am looking for a simpler solution (imo), without sliders.

It’s just a “decorative” section with images. Just two flex row divs with elements side-by-side. Each div is 100% of the width. And the main wrapper is also flex row and has an overflow of hidden. So when I translate on the X axis each div -100% during a quite long amount of time (20 secs), it has an infinite loop / marquee effect.

I get the effect right, but when the second div gets to its end, then there’s a jump that “restarts” the animation. This didn’t happen with Motion.page with the same settings and approach. So there’s something different in Bricksforge, but I am not sure what it is, and what settings I need to fine-tune to get the desired effect!

[manc]

Unless I’m missing something it seems to work for me, check the vid below I used a 5sec duration though just to illustrate (the glitch at around 5 secs is just me reloading)

https://jam.dev/c/c640757b-58df-4086-ae71-9e019a07c621

.photo-carousel__block

.photo-carousel__grid

and the images were just set to a width of 16.67% since I have 6

and timeline as yours:

[knut_studio]

Hey Martin!

Thanks to your help I figure it out

I was adding the -1 to Repeat in the animation field itself. I saw in your screenshots that you are adding the Repeat -1 to the “parent” settings!

Thanks for your help!!