Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


InVision ambassador ambassador
Owen Hughes Owen Hughes Edited

Wink animation

Hi 

 

Im wondering if you can make a wink animation in invision. I have a smiley face on one of my designs that id like to wink (as creepy as that sounds!). 

Im also trying to animate some lightning too if anyone can help with that.

Is there a way to do this using the prototype animations? 

 

Thanks

Owen

0

comments

sort by


FAHANMI Ambrose Wuraoluwa
InVision ambassador FAHANMI Ambrose Wuraoluwa , ambassador
Comment actions Permalink

Hi Owen,

To create the winking animation:

  • Draw the smiley or face. (Make sure you name each elements that would comprise the smiley/face appropriately since they would just be a couple of ellipses; this would allow each element on the artboard auto-link when animating).
  • Duplicate the artboard containing the smiley twice. (You would now have three different artboards).
  • For the 2nd artboard, edit one of the eyes on the face or smiley to look like a wink. What you'll have now is the first artboard and the last one looking exactly the same.
  • Create a transition (timer, click or any other) from the first artboard to the second artboard. Use the motion transition option.
  • Also create a transition from the second artboard to the third artboard but this time use the instant transition option.

You should have a winking animation now.

(Check attached picture for visual guide).

I hope this helps.

Regards,
Wurah.

2

Owen Hughes
InVision ambassador Owen Hughes , ambassador
Comment actions Permalink

Thats great thanks Wurah! 

0

join the conversation

to comment, sign up or sign in.