Framer playground for beginner

nana 🧙🏻‍♀️

Published in

Design & Code Repository

2 min readMay 6, 2018

--

If you are first user for Framer and not familiar with code, just try below examples step by step with me.

01.flowComponent

flow = new FlowComponent flow.showNext(firstPage) firstPage.onClick -> flow.showNext(secondPage) secondPage.onClick ->…

framer.cloud

2.onTap

nana.onClick -> isActive = this.classList.contains('is-active') if (isActive) # make it smaller nana.animate rotation…

framer.cloud

3.onClick

btn.onClick -> isActive = this.classList.contains('is-active') if (isActive) # make it smaller rabbit.animate y: 473 x…

framer.cloud

4.multipleState

I'm nana UI & Visual Designer with coding 🔮 nanajeon.com ###

framer.cloud

5.Infinity rotation

I'm nana UI & Visual Designer with coding 🔮 nanajeon.com ###

framer.cloud

6.stateCycle rotation issue

This project was made with Framer, a design tool for turning original concepts into working prototypes.

framer.cloud

7.loop

I'm nana UI & Visual Designer with coding 🔮 nanajeon.com ###

framer.cloud

8.draggable

I'm nana UI & Visual Designer with coding 🔮 nanajeon.com ###

framer.cloud

9.Pinchable

This project was made with Framer, a design tool for turning original concepts into working prototypes.

framer.cloud

10.Mapping Arrays

This project was made with Framer, a design tool for turning original concepts into working prototypes.

framer.cloud

11.overlays

This project was made with Framer, a design tool for turning original concepts into working prototypes.

framer.cloud

That’t all for now❤️

😄

Lastly, I would like to share <FrontEnd30 /> where I learnt many cool front-end techniques.

Master 30 front-end skills — FrontEnd30

This fall we’re launching FrontEnd30, a premium course to strengthen your front-end skills with 30 real-world examples…

frontend30.com

🎉🎉🎉🎉🎉 Happy Coding Today 🎉🎉🎉🎉

Interaction Design

nana 🧙🏻‍♀️

Written by nana 🧙🏻‍♀️

Editor for

Design & Code Repository

UI / Product designer who loves CSS magic 🧙🏻‍♀️ nanacodesign.com

Help
Status
About
Careers
Press
Blog
Privacy
Terms
Text to speech
Teams