Banner/Creatives | SVG Animation

So we just did our first SVG Path Animation in Hype.

Pretty cool way to animate. After a few weeks I can release the Hype files so you can see how we build it.

  1. We made one big Symbol inside of hype and animated the lines and the text positions.
  2. Then we moved the Symbol around the canvas to animate movement.

Here are two rough animations.

11 Likes

Holy :cow:! Looks beautiful Bendora thanks for sharing. They don't look rough at all :slight_smile:

2 Likes

Cool, I like this! It's commercial pop looking with those lines animating, pretty sure I've seen something similar. I'd play with the easing to get a more of a dramatic movement in between takes or slides. Have you tried it without the outlines/strokes just colors?

First off... love the animation

@Bendora If these are path animations have you used a SVG filter to add a stroke to a path or is this all done with regular Hype vector shapes (hence not really a path animation) but rather a shape morph?

Hello @MaxZieb,

you are correct. It is the Shape Morphing used in Hype. Don't mean to misinform. Would be wrong for the cookbook.

2 Likes

Either way. Looks awesome. Love the virtual cam effect, too.

We are entering phase 2. More later.

3 Likes

Why do costumers keep reducing animations to a 5fps-GIF animation?

1 Like

Really good looking animation!

1 Like

And we have some more to show.

4 Likes

Very good animations :heart_eyes: