Banner/Creatives | SVG Animation

Animation
1

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.

300x600_master

300x600_master_2

2

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

3

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?

4

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?

5

Hello @MaxZieb,

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

morphing
morphing1238×688 45.8 KB

6

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

7

We are entering phase 2. More later.

600x300_bmf_kp_ka

8

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

9

Really good looking animation!

10

And we have some more to show.

teil2

11

Very good animations :heart_eyes: