I would like to create animated line drawings to accompany various blog posts. The Hype pen tool can do this, but it is rather limited and sidecar isn’t an option for me. Is there a way to import a vector graphic made in another app and attach it to a Hype timeline so the exported drawing appears animated?
You can animate imported SVGs using SVG presentation attributes
This video shows one way to do that.
However, I’m not aware of any way to animate an imported line drawing as if it were a native Hype vector.
1 Like
Another easy approach is to group layers in Illustrator (or your editor of choice) into viable groupings. And export these groups each to separate SVGs. Now just import them them in Hype and layer them as needed. Finally, animate them as usual.
1 Like
Helpful video. Thanks for that drewbullen. I grouped layers and exported them as separate SVGs as suggested by MaxZieb. It works. ;—) I also have a greater appreciation for the pencil tool and all that it is doing. Enhancing the pencil tool with a few drawing basics would be appreciated.
Great to hear. Here is also some staggered line animation for embedded SVGs:
staggeredLineAnimationReveal.hype.zip (160,2 KB)
Portrait of Fourier, by Stuart Jantzen done for 3Blue1Brown
2 Likes
Here is an animated Excalidraw animation I made using your approach.
The Hype project file with SVG exported from Excalidraw is available here:
Excalidraw_staggeredLineAnimationReveal.hype.zip (44.8 KB)
3 Likes
I recently posted a short tutorial on my YouTube channel demonstrating how to extend this approach to line animation. In this video, I show:
- how to make vector graphics with a more realistic hand-drawn appearance in drawing tools outside of Hype
- how to import these graphics into Hype as inline SVGs
- how to animate these graphics on the Hype timeline (without having to write any new code)
- how to add a complementary hand-written font and animate it using the @mark haute - typewriter effect (also without having to write any new code).
You can find this video on my YouTube channel here: Make hand-drawn whiteboard motion graphics in Hype from external SVGs - YouTube
The code example mentioned in this video is:
HandDrawnShapeswithTypedLabels.hype.zip (125.0 KB)
4 Likes
drewbullen, that is amazing! —The content, but also your attention to detail in making the tutorial. I’d say that’s the most impressive thing I’ve seen all day, except a cross-link led me to your Hype Code Playground. Well done!
Could you make Hype Code Playground translate both ways? Let a user drop in Javascript and the playground output block code. That would be helpful for Hype, but also for educational projects in Thunkable. Kids don’t “get” JS, but take right away to block coding. By “kids” I mean this teacher too.