menu

Framer

Express your creative ideas through interactive design. Join the community for updates, support, resources, and more.

Channels
Chat
view-forward
# All channels
view-forward
# General
view-forward
# Announcements
view-forward
# Bug Reports
view-forward
# FAQ
view-forward
# Feature Requests
view-forward
# Learn
view-forward
# Meetups
view-forward
# Resources
view-forward
# Snippets & Tips
view-forward
Team

🆕 Playground Examples

May 10, 2019 at 7:48am

🆕 Playground Examples

May 10, 2019 at 7:48am (Edited 10 months ago)
Hey all—here’s an example file with 30 pre-made interactions made in Code, ranging from spring animations to 3D dragging to color conversion and stack animations—it covers all of the basics. Hope it helps! You can download the Framer file here: http://bit.ly/playground-examples
Canvas.png

May 15, 2019 at 8:18am
Just uploaded a new file with many small updates, fixes and tweaks. Many thanks to for catching most of these!
like-fill
4
  • reply
  • like

May 27, 2019 at 4:12pm
Anyone else have problems opening this file? When I open it (v26) it doesn't render in the preview window at all. Very strange.
  • reply
  • like

May 28, 2019 at 8:31am
Anyone else have problems opening this file? When I open it (v26) it doesn't render in the preview window at all. Very strange.
I was about to say that you should select a Frame on the Canvas… :) But yeah, I opened it again, and for some reason there wasn’t a Framer Library selected (https://help.framer.com/troubleshooting/changing-your-framer-library) Selecting the built-in library made it work again.
like-fill
1
  • reply
  • like
Thanks so much - I knew it must be something very small! 👏
Edited
like-fill
1
  • reply
  • like

May 29, 2019 at 4:35pm
it would be so valuable if you can comment the code … example 8 (event sequence). where does async function sequence() {} come from? I can't find it documented in the API docs
like-fill
1
  • reply
  • like
example 16: effect is not documented in the API (or I can't find it). const scale = convertScale(info.normalizedOffset) doesn't mean anything to me. It's not documented anywhere.
  • reply
  • like

June 7, 2019 at 8:19am
I was about to say that you should select a Frame on the Canvas… :) But yeah, I opened it again, and for some reason there wasn’t a Framer Library selected (https://help.framer.com/troubleshooting/changing-your-framer-library) Selecting the built-in library made it work again.
This is probably fixed in Framer X28. Among the fixes in the release notes: “Cases where no Framer Library would be selected.”
like-fill
1
  • reply
  • like
it would be so valuable if you can comment the code … example 8 (event sequence). where does async function sequence() {} come from? I can't find it documented in the API docs
This is common JavaScript. With async you make a function asynchronous, so that the statements inside it have the possibility to be executed one after the other. https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function …and by putting await in front of an animation.start() you’ll make everything that follows it wait for it to finish. https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/await
  • reply
  • like
example 16: effect is not documented in the API (or I can't find it). const scale = convertScale(info.normalizedOffset) doesn't mean anything to me. It's not documented anywhere.
True. That’s not yet in the docs. (Should be here, I suppose: https://www.framer.com/api/page/#effects) The example is all we have.
like-fill
2
  • reply
  • like