Struggling to create a specific animation

Hey everyone!

I am struggling with an animation. Check the video I made. I want the waves to move in a slow cool way. I am not very good at vector animations and am wondering if someone have any tips. I'll include the svg files as well.

Here is kind of the effect I am after (00:09 secs in): MotionElements

Here are the images and workfile. Greatful for any tips :slightly_smiling_face:
waves.zip (2.1 KB)
Hype_workfile.zip (913.3 KB)

Maybe this will help you: Trace the waves using the vector tool. Then you can animate them the way it's shown in this video. My example is just quick and dirty, but this workflow should point you in the right direction.

wave.hype.zip (21.5 KB)

1 Like

Most waves are just static images that animate their position left and right. You can get a bit of a "barber pole" effect depending on how you loop them - a lot of times the waves moving is more of an optical illusion. It is possible to also achieve some of this (or add the effect) with some path animation, but generally this isn't even necessary.

One of the tricks is if you want it to go on forever is that you can loop it as long as the shape is consistent.

Then you can add another wave with different loop timing and it will look highly dynamic.

linear-waves.hype.zip (24.2 KB)

2 Likes

Was just playing around… nothing truly finished, but has many parameters either with setDefault or data-attributes.

HypeDynamicWave.hype.zip (18,6 KB)

2 Likes

The gradient looks nice on that too!

2 Likes

Thank you for you examples! The awards was yesterday so a bit too late but I will save these for future reference. Cheers! :heart:

Awesome work!

Where do the blue color come from? Can't find that in the code.

You can override every parameter found in _defaults using data attributes as well. So, you can find it in the Identity Inspector under Additional HTML Attributes

2 Likes