Beginner: How to create wavy arms?

Animation
1

Hi everyone, I’m new to Hype…just played with it for a couple hours, but love the possibilities!

I’d like to learn Hype to create animated gifs to add to websites. This was my first attempt to get a moving character.
https://dribbble.com/shots/4052944-First-animation-attempt-with-hype

Now, I’d like to figure out how to make the arms wave rather than be completely stiff. I guess, I’m trying to make noodle arms that have some bending going on similar to how the legs work in this example https://dribbble.com/shots/1618460-Running-cycle

And so I got stuck and not sure how to go about this. Is there a tutorial or can someone give me some ideas?

I’m using Sketch for the design assets and then I’m bringing them into Hype.

Thanks!
-Mike

2

Hype v4, now in beta, might have what you’re looking for! You’re welcome to check out the Hype Conference video demo (see 40m30s mark) and sign up for the beta.

3

Thanks, Jonathan, v4 definitely looks to do what I was after. Exciting!

I just signed up for the Beta. Would love to help and see if I can get vector animations to do some fun things. I’m coming from a branding/web design background, and want to throw some fun gifs together to bring more life into website projects and into our communications.

Thanks!

4

Great! We’ll be shooting out a new batch of beta invites soon (when we have a new build). Thanks!

5

Hi Jonathan, I just spotted this newcomer on Product Hunt https://www.producthunt.com/posts/timeline-for-sketch

Anyhow, would love to make some videos on how to achieve animations with Hype

Look forward to the beta!

1 Like
6

You’re definitely welcome to make videos! We’d just request not posting until after the beta has shipped :slight_smile:.

Thanks for the head’s up; always good to see what other tools are capable of.

7

Old school: Using Photoshop or another app to create a long wide fat wavy line that is far wider than the actual arm, make sure the background is transparent, then save it as a PNG. Bring this into Hype, then group it to itself. This creates a parent object the same size as the object. Adjust the parent shape by resizing it to the desired arm width. Use the Inspector to hide the overflow. Animate the horizontal position of the wavy element. If you want to add a hand, create this separately, put it in the desired position, then select this along with the original group. Now create a group from this. Animate the vertical position of the hand (adding rotation if desired) so that it matches the position of the wavy line.

1 Like