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

What is Framer? Join the Community
Return to index
Daniel Leinerud
Posted Mar 30 - Read on Facebook

I made a little module that mimics an iOS notification when using the phone (so, not a lockscreen notification that is).

http://share.framerjs.com/090yu5ay4ban/

It's customizable with App name, Timeago text, Message, and App icon. "showNotification = ( appname, timeago, message, imagepath )". So you can make push notification from multiple applications within the same Framer project.

I tried my best to make it look as real as possible, but free online PSDs and screenshots from my own iPhone 5s, perhaps didn't fully do the trick. But for a prototyping perspective, I guess it will work fine.
This is my first Framer JS and Coffescript experience so please be gentle (UX designer at heart and wannabe developer).

For now, it works best on iPhone 5 (and 4 I guess), looks bad on iPhone 6, and terrible on iPhone 6+. I will save that for a rainy day, or please feel free to add that support yourself here: https://github.com/leinerud/framer.iosnotification

4 Comments

Koen Bok

Very good start! Well done.

Jordan Robert Dobson

Nice! It's great to focus on these basics to get a feel for Framer and coffeescript.

Daniel Fosco

Awesome! That was the same thing I tackled for my first framer project a few weeks ago :)

I didn't have customizeable data because I pulled the content straight from Sketch layers, but I tried to add a bit of the bounce and threshold from iOS to the animations, check it out:

http://danielfos.co/motion/ios-notification/

Daniel Fosco

Also, I don't have it in a repo right now, but let me know if you want to fork mine and get some of the code into your module!

PS: Or perhaps I should do a pull request into yours?

Read the entire post on Facebook