How to insert the WIGGLE EFFECT animation (Floating Elements)

Go to the page editor;
Click the gear icon in the top right corner of the screen;

Next, click "Javascript & CSS";

Click to "Adicionar" a new code;

Choose a name for your code, select the "Funcionamento" option and add the entire code below into the text field;

<style>

  @keyframes float {
    0% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-20px);
    }

    100% {
      transform: translateY(0);
    }
  }

  .float {
    animation: float 2s ease-in-out infinite;

  }
</style>


<script>

  let wiggle = document.querySelectorAll("#ElementID_01, #ElementID_02, #ElementID_03");
  wiggle.forEach(function (elemento) {
    const deslocamento = Math.floor(Math.random() * 20) - 1;
    const animate = "float " + (Math.random() * 1 + 10) + "s ease-in-out infinite";
    elemento.style.transform = "translateX(" + deslocamento + "px)";
    elemento.style.animation = animate;
  });

</script>

The only change you will need to make to the code is to replace the part that says #ElementID_01 with the ID of your respective element. Do not add any extra characters.

Then click "Salvar"!

If you want a second element to stay floating on the page, just insert the entire script above again, right below the first one, without the TAG at the end of the code. Just like in the example below.

How to get the ID of an element

To identify the ID of an element, just right-click on the element and then click "Inspect element".

Once you do that, a new panel will open on the right side. When it opens, locate the ID of the element you want to use.

Still have questions? Reach out to our team on Chat! We're always happy to help.

Updated on: 08/01/2026

Was this article helpful?

Thank you!