# How to create an animation in the hero section

**URL:** <https://forum.wixstudio.com/t/how-to-create-an-animation-in-the-hero-section/49721>\
**Category:** Ask the community\
**Tags:** general, wix-studio\
**Created:** [May 2, 2023, 7:48pm UTC](https://forum.wixstudio.com/t/how-to-create-an-animation-in-the-hero-section/49721 "2023-05-02T19:48:41Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![michel-akpiti](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/michel-akpiti/32/8368_2.png) [@michel-akpiti](https://forum.wixstudio.com/u/michel-akpiti)\
**Post date:** [May 2, 2023, 7:48pm UTC](https://forum.wixstudio.com/t/how-to-create-an-animation-in-the-hero-section/49721/1 "2023-05-02T19:48:41Z")

</div>

Hey everyone

I am doing a project for a client  
I would like to create an animation as a hero section. I would like to know if you think creating it directly on the editor is possible. If so, could you please tell me how you would proceed to do it? If not, do you have any ideas on how operate it?  
Here is the animation I would like to reproduce

1. 

```
 First step 

```

Here is the initial step

 ![](https://us1.discourse-cdn.com/wix/original/3X/5/3/5393efe95ea22fcb51fa8b6004625be5269ca0e2.png)

1. 

```
 Step two 

```

The triangles should come together to make a band with the logo that appears at the end like this

 ![](https://us1.discourse-cdn.com/wix/original/3X/c/c/cc3ed970c2b2d9f6ee84ae6a327f0d20a0e86be8.png)

Do you think this is achievable?

If you know how to do it, I’m not opposed to outsource this part

Thank you so much in advance !

---

<div class="post-metadata">

**Author:** ![noahlovell](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/noahlovell/32/118920_2.png) [@noahlovell](https://forum.wixstudio.com/u/noahlovell)\
**Post date:** [May 3, 2023, 10:46am UTC](https://forum.wixstudio.com/t/how-to-create-an-animation-in-the-hero-section/49721/2 "2023-05-03T10:46:45Z")

</div>

Hey @michel-akpiti !

It might be possible using the Animations and Interactions (the triggers of click/hover might not work if you want it to start automatically), and it might get a little complex.

It also might be possible using Velo (code) but with lots of triangles, it would likely become complex quickly (doesn’t mean to say it’s not possible).

The other option would possibly be to create the animation externally, and then use a video element to show the animation.

Good luck!

---

<div class="post-metadata">

**Author:** ![michel-akpiti](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/michel-akpiti/32/8368_2.png) [@michel-akpiti](https://forum.wixstudio.com/u/michel-akpiti)\
**Post date:** [May 3, 2023, 7:02pm UTC](https://forum.wixstudio.com/t/how-to-create-an-animation-in-the-hero-section/49721/3 "2023-05-03T19:02:41Z")

</div>

Thanks a lot! If I want to use the Animations and Interactions do you know how I could make it start automatically?

---

<div class="post-metadata">

**Author:** ![noahlovell](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/noahlovell/32/118920_2.png) [@noahlovell](https://forum.wixstudio.com/u/noahlovell)\
**Post date:** [May 4, 2023, 9:04am UTC](https://forum.wixstudio.com/t/how-to-create-an-animation-in-the-hero-section/49721/4 "2023-05-04T09:04:59Z")

</div>

Currently, the only triggers are Hover and Click, so if you chose that route, you’d have to decide which one might work best, but I understand the need for other types of triggers 🙂

---

<div class="post-metadata">

**Author:** ![kalevhen](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/kalevhen/32/37309_2.png) [@kalevhen](https://forum.wixstudio.com/u/kalevhen)\
**Post date:** [May 4, 2023, 12:51pm UTC](https://forum.wixstudio.com/t/how-to-create-an-animation-in-the-hero-section/49721/5 "2023-05-04T12:51:21Z")

</div>

Hi there. A colleague of mine is jus t [create an online course](https://kwiga.com/start-and-promote-courses) on this topic, but it is not yet available to me. To be honest, I don’t know exactly how to do this, but I can give you some general tips for creating animations for character sections.  
Creating an animation directly in the editor depends on the capabilities of the editor you are using. If your editor has animation capabilities, you can create the animation by creating keyframes and adjusting the properties of the elements in the animation over time. You can use tools like motion graphics, shapes, and text effects to create the animation. Also, you can create the animation using a separate animation software, such as Adobe After Effects or Blender, and then import the animation into the editor. In either case, you will need to ensure that the animation is optimized for web use, meaning it is a small file size and does not impact the page load speed. You can achieve this by using optimized file formats, such as GIF or SVG animations, and reducing the number of frames in the animation. I hope you find this useful.

---

<div class="post-metadata">

**Author:** ![id3nty-studio](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/id3nty-studio/32/37320_2.png) [@id3nty-studio](https://forum.wixstudio.com/u/id3nty-studio)\
**Post date:** [May 5, 2023, 1:46pm UTC](https://forum.wixstudio.com/t/how-to-create-an-animation-in-the-hero-section/49721/6 "2023-05-05T13:46:58Z")

</div>

Okay I see thanks for the answer, but is it possible to trigger the animation to start automatically using Velo code ?

---

<div class="post-metadata">

**Author:** ![amr-fateem19375](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/amr-fateem19375/32/37319_2.png) [@amr-fateem19375](https://forum.wixstudio.com/u/amr-fateem19375)\
**Post date:** [May 5, 2023, 5:43pm UTC](https://forum.wixstudio.com/t/how-to-create-an-animation-in-the-hero-section/49721/7 "2023-05-05T17:43:18Z")

</div>

How about creating it in a gif or a video and using that ?
