How to create an animation in the hero section

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

  1.  Step two 
    

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

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 !

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!

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

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 :slight_smile:

Hi there. A colleague of mine is jus t create an online course 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.

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

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