New Lottie every time page is refreshed?

Hey everyone!

Can anyone help me have it so that every time my home page is refreshed a new Lottie is shown? my websites homepage is basically just a giant spinning Lottie shape and I’ve designed 5 others I want to be shown every time someone refreshes the page or goes back to the home page. I would really appreciate anyone who can figure this out!

  • Stephen

Here is my site Read-Only: Webflow - Ultra-Vox Studios

Hello Stephen
Here is the code you can use to show random Lottie files every time you load the page.

  • Replace ‘totalLotties’ with number of Lottie files
  • Give all the lottie files a common class and replace that class with ‘lottie-animation-6’ in the code.
    Let me know if you have any issues.
<script>
$(document).ready(function(){
  var totalLotties = 6;
  const rndInt = Math.floor(Math.random() * totalLotties);
  $('.lottie-animation-6').each(function(){
      if($(this).index() == rndInt){
          $(this).show();
      } else {
          $(this).hide();
      }
  })
})
</script>

Hey Haji!

thank you so much for responding. I followed what you said but its not totally working. When I refresh the page the Lottie goes away but every so often the one I have published to my page shows up. So I think its working but because I can only have that one Lottie published at a time it doesn’t show the others. Hope that makes sense haha

There also wasn’t a way for me to give all the Lottie files a common class. Only the that’s on the page at a time. Is there a way to get the URL of each Lottie from Lottie files and work that into the code to show randomly? Im sure that would work (hopefully)but I would need help with the code again.

Thank you again for all your help!!!

HOLY CRAP HAJI!!!

I WAS WRONG YOUR CODE WORKED BEAUTIFULLY!!!

For anyone looking to do this, after adding Haji’s amazing code I just dragged and dropped the other Lottie files into the same Div block. and since they were all in the same place and had the same common class it just rotates the exactly as you would want.

Haji is the MAN!

Hey Haji since you were so awesome with the last one. Do you know a code to make my background color of my entire homepage change over time? like if I have these 5 background colors -

#D2D8CC
#FF2C34
#83735B
#FF546E
#C7FF64

Ive been trying again to find anything on the internet but its all very confusing and nothing seems to work with Webflow. I feel like it should be really simple to just add a code right to my homepage to do this.

This will be done with animation.

Hey there!

So you’re totally right and I was able to make the animations to make the background color change over time! But is there a way to randomize the different background animation colors? I don’t think they have that option just yet and don’t know if you may have another code you can offer. I would really appreciate you!

Also I bought my official Domain name www.voxstudios.com so here’s my new read only site :blush:.

https://preview.webflow.com/preview/voxstudios?utm_medium=preview_link&utm_source=dashboard&utm_content=voxstudios&preview=23bc1f318ca3d4f5dfec2eb72948e82f&workflow=preview