> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://ajuda.greatsoftwares.com.br/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to insert the WIGGLE EFFECT animation (Floating Elements)

1. Go to the page editor;

2. Click the **gear icon** in the top right corner of the screen;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/clicar-engrenagem_5znn9b.png =650x308)

3. Next, click **"Javascript & CSS"**;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/achar-js_15h4zvr.png =650x451)

4. Click to **"Adicionar"** a new code;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/adicionar-codigo_sqhe1r.png =650x532)

5. 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>
```

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_he2sjh.png =650x1239)

6. 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**.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1ozhpcn.png =650x173)

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 </style> TAG at the end of the code. Just like in the example below.

### How to get the ID of an element

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

![](https://storage.crisp.chat/users/helpdesk/website/a6ab90d8350d6000/capturar7png_yip9jg.png =650x879)

2. 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.

![](https://storage.crisp.chat/users/helpdesk/website/a6ab90d8350d6000/capturar8png_j86jy6.png =650x360)

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