Animating beziers, lines, triangles


(Andreas) #1

Hello everyone,

What do you use to animate lines and whatnot in Hype? I saw some posts recommending Vivus and someone mentioned an Adobe library too. How do you draw lines and triangles in Hype? Is it possible to animate these? Are there tutorials? Is it possible to do an animation like the one attached to this topic?

Thanks!

shapes.mov (74.0 KB)


(π•„π•šπ•”π•™π•’π•–π• 𝔾𝕒𝕣𝕠𝕗𝕒𝕝𝕠) #2

I use SVG, or even empty elements, to create shapes.

Three thin rectangles, with a solid background, can be rotated into a triangle.

Animating those shapes is tricky. Flash had tweening with vector shapes. Recreating that in Hype can be very challenging.


(drewbullen) #3

SVG is definitely the best way to generate complex shapes in Hype - pasting the SVG code directly into a Hype element allows you to control aspects of the shape programmatically.

You can also paste CSS code directly into a Hype element to get a range of interesting shapes like this:

Here is an example file showing how this is done - CSS_shapes.hype.zip (21.4 KB)


(Andreas) #4

I really dig your slighly more advanced workflows. The problem that I have is that β€œgetting there” is not as easy. From the learning curve, it seems a bit too steep to get to know all this stuff, or at least it’s hard to find the right documents that teach it the way it’s understandable for folks like me who are learning it. It’s not novice, nor advanced, somewhere in the middle. Nothing I found answered why you could do all those things. I hope this makes sense.