How do I make a looping element?

Design help Animations & Interactions
1

Hello everyone,

I’m currently building a website on my own as a way to practice what I’ve learnt in Webflow. However, I’ve been stuck with this minor problem of making a looping element, which you can find in the link below as an example of what I want to create.

I just started learning so any advice would be helpful!!!

Blockquote

2

Hi Phuong,

Your first link is password-protected, so I can’t see what you are trying to create.

In general though the words “looping element” suggest an animation or video, and there are quite a few paths you can take;

  • Build a Lottie
  • Animated Gif
  • Video loop
  • Webflow interactions, e.g. moving individual elements on a timer
  • GSAP animation
  • Rive

You’ll find a lot of good technique examples in the Made in Webflow space.

3

Hi, thank you for your reply. I have publicized the link so could you check it again and see how can I try to create it? Thanks a lot!

4

Again it depends on how you’re intending to use it in your site.
Every one of the approaches I gave you above will work, and they all have different advantages and disadvantages.

I’d start with Webflow interactions since it’s built into the platform.

5

I will only add to @memetican recommendations that the easier way is use custom CSS animation as it is only a few lines of code.

give your image class eg. star and use following example

<style>
/*animation*/
.star {
  animation: rotating 15s linear infinite;
}
@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

</style>

If you do not know how to implement custom code please refer to WF documentation.

6

Heh heh yep, CSS animation, another good one in this case.