This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Todd Hamilton
Posted Jun 25 - Read on Facebook

Hey everyone! I wanted a better way to demonstrate typing in my prototypes so I created a simple keyboard simulator.

It's super easy to use, just copy the code into your project and run: type(yourLayer,'string you want typed out')

Right now its only the default iPhone 6 keyboard but you could easily tweak this code for other devices. For non-letters I'm just hiding the key to keep things simple. Enjoy!

Download the project here: https://www.dropbox.com/s/rvtz46wxibinifl/keyboard.framer.zip?dl=0

15 Comments

George Kedenburg III

José Gutiérrez Álvarez

Marcos Navarro

Koen Bok

Wow!

Joshua Tucker

This is rad Todd! Thanks for sharing!

Christian Valencia

Thank you!!!

Chad Lonberger

Really nice!

Johannes Eckert

sounds like a perfect module for framer. What is a meaningful way of collecting those? Github wiki?

Slghtr Khari

This is 🔥

Sven Szota

Ha! Searched yesterday evening for something like that. I love this community. Thanks for sharing! <3

Todd Hamilton

Johannes a module for this with some more options would be awesome! Could also add some basic hide/show keyboard functions.

Thierry Meier

Thanks Todd Hamilton, this is extremely helpful. I tweaked this a bit further by adding a multiplier that contains a random number to typeSpeed. This way, the interaction feels more natural. No one types at the same speed for every letter :). Did you create a module for this at some point?

Fran Pérez

Thierry, can you share it?

Thierry Meier
Jordan Robert Dobson

#framercode

Stephen Crowley

^ submit to www.framerco.de

Read the entire post on Facebook