menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

Framer

The best prototyping tool for teams. Join our Discord chat for weekly classes and real-time help with Framer. http://framer.com/r/discord?utm=spectrum

Channels
Team

🆕 Playground Examples

May 10, 2019 at 7:48am
The Framer community has a new home. This thread is preserved for historical purposes. The content of this conversation may be innaccurrate or out of date. Go to new community home →

🆕 Playground Examples

May 10, 2019 at 7:48am (Edited 3 years 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

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.

May 28, 2019 at 8:31am
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
Thanks so much - I knew it must be something very small! 👏
Edited
like-fill
1

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
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.

June 7, 2019 at 8:19am
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
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
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