Prototypr

Prototyping, UX Design, Front-end Development and Beyond 👾 | ✍️ Write for us…

Follow publication

Add Modal Forms, Full-Screen Photos Overlay and Hamburger Menu to your Site

Anima App's medium blog
Prototypr
Published in
2 min readSep 19, 2017

--

Anima allows designers to create high-fidelity prototypes right inside Sketch, Adobe XD, and Figma and export HTML & CSS in a single click.

Now we wanted to cover some of the common use cases for these cool new features 😎

How to Use it

Under the ••• button in the Launchpad panel on the bottom right corner, you can find these two new featutes — Animations & Show Overlay.
Now let’s see some tricks.

🍔 Hamburger Menu

Hamborger-Menu is an overlay artboard, linked from multiple pages on our website. Here’s the result of exporting the Sketch to a live website:

https://launchpad.animaapp.com/HamburgerSample

Link to a live demo

🌅 Image Overlay

When you create an image-grid or products catalogue, usually you want to show more details / larger size popup. Here’s the result:

https://launchpad.animaapp.com/PhotoOverlaySample

Link to a live demo

📝 Form Overlay

Sometimes you want users to enjoy a clean page, and see the form only when they decide to join — Then give it their full attention. This is possible with a link, but smoother with an overlay. Here’s the result:

https://launchpad.animaapp.com/FormOverlaySample

Link to a live demo

Play with the Sketch file to see how we’ve set the animations & pins to all samples.

Hope you liked it, clap some if you did 😊
Come join the discussion on our Facebook Group, see you there 👋

--

--

Published in Prototypr

Prototyping, UX Design, Front-end Development and Beyond 👾 | ✍️ Write for us https://bit.ly/apply-prototypr

Responses (3)

Write a response