Skip to content

Instantly share code, notes, and snippets.

@assassinave
assassinave / variable-text-object.tsx
Created January 23, 2019 22:34
Define a variable text value in Override to use in Design Component
// Allows you to define a static text value and apply the Override to any number of text objects on the canvas
// Make sure if writing from a clean file you have this import statement at the top to use an Override, etc
import { Data, animate, Override, Animatable } from "framer"
// Define the "const" name as you like and modify "Julie to any value you need
export const MyName: Override = () => {
return {
text: "Julie"
}
@assassinave
assassinave / input-field-to-output.tsx
Created January 23, 2019 16:46
Show value of input field in different output
import { Override, Data } from 'framer';
const dataText = Data({ text: 'Hello World!' });
export const TextChangingInput: Override = () => {
return {
onValueChange: (text: string) => {
dataText.text = text;
},
};
@assassinave
assassinave / data-interactions-code-component
Created January 22, 2019 17:26
Use Data interactions within a code component
// Add "export" in front of your Data variable
// Import in header of file
export const data = Data({
refresh: true
})
@assassinave
assassinave / utils-modulate-framerx.tsx
Created December 16, 2018 16:50
Framer X - Utils Modulate
// Framer X Utils.modulate equivalent
function modulate(value, rangeA, rangeB, limit = false) {
const [fromLow, fromHigh] = rangeA;
const [toLow, toHigh] = rangeB;
const result = toLow + ((value - fromLow) / (fromHigh - fromLow)) * (toHigh - toLow);
if (limit === true) {
if (toLow < toHigh) {
if (result < toLow) {
return toLow;
@assassinave
assassinave / no-transition-page-component.tsx
Created October 30, 2018 15:37
Framer X - No transition using Page Component
// TBD
// Set animateCurrentPageUpdate to false on Page Component.
@assassinave
assassinave / local-img-video.tsx
Last active September 27, 2020 01:22
Framer X - Display local image or video sources in Code Component
// If you want to place local images or videos to your Framer
// Example (not full code)
// Add this at top of .tsx file you're needing to add local images/videos
import { url } from "framer/resource";
// When adding them into your
@assassinave
assassinave / loading.json
Created September 25, 2018 06:59
Loading animation
{"v":"5.1.6","fr":30,"ip":0,"op":94,"w":300,"h":300,"nm":"Comp 2","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[81,59.26,0],"ix":2},"a":{"a":0,"k":[-30,-6.544,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.651,0.667,0.667],"y":[0.998,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"n":["0p651_0p998_0p333_0","0p667_1_0p333_0","0p667_1_0p333_0"],"t":9,"s":[0,75.476,100],"e":[110,75.476,100]},{"i":{"x":[0.524,0.833,0.833],"y":[0.97,1,1]},"o":{"x":[0.379,0.167,0.167],"y":[0.013,0,0]},"n":["0p524_0p97_0p379_0p013","0p833_1_0p167_0","0p833_1_0p167_0"],"t":21,"s":[110,75.476,100],"e":[100,75.476,100]},{"t":29}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[85.26,14.271],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":2,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0.349,0.796,0.91,1],"ix":4},"o":{"a":0,"k":100,
{
"v": "5.1.10",
"fr": 24,
"ip": 24,
"op": 56,
"w": 600,
"h": 600,
"nm": "Loader 13",
"ddd": 0,
"assets": [],
@assassinave
assassinave / vigilance_camera.json
Created August 13, 2018 16:39
Lottie - Security Camera
{"v":"5.1.16","fr":29.9700012207031,"ip":0,"op":241.000009816131,"w":190,"h":120,"nm":"icon-cam","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Layer 5 Outlines","parent":2,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[49.745,55.212,0],"ix":2},"a":{"a":0,"k":[57.406,55.212,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":0,"s":[{"i":[[0,0],[2.421,0.896],[1.407,0.003],[0,0],[-1.407,-1.065],[-2.067,-1.414],[0,0],[0,0]],"o":[[0,0],[-1.659,-0.614],[-2.726,-0.006],[0,0],[9.294,7.03],[2.682,-5.327],[0,0],[0,0]],"v":[[96.172,14.855],[23.557,-14.8],[18.069,-16.023],[-20.001,-16.027],[-17.786,-14.352],[29.042,20.91],[36.866,14.853],[94.124,15.168]],"c":true}],"e":[{"i":[[-1.545,-3.586],[0.514,1.738],[0,0],[0,0],[0.457,-4.183],[0.645,-2.333],[0,0],[0,0]],"o":[[-1.27,-4.057],[-1.51,-5.103],[0,0],[
@assassinave
assassinave / states.txt
Created March 20, 2018 15:29
[Frame States] #framer #states
layer.states =
stateA:
opacity: 0
stateB:
opacity: 1