This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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" | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Override, Data } from 'framer'; | |
const dataText = Data({ text: 'Hello World!' }); | |
export const TextChangingInput: Override = () => { | |
return { | |
onValueChange: (text: string) => { | |
dataText.text = text; | |
}, | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Add "export" in front of your Data variable | |
// Import in header of file | |
export const data = Data({ | |
refresh: true | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// TBD | |
// Set animateCurrentPageUpdate to false on Page Component. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"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, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"v": "5.1.10", | |
"fr": 24, | |
"ip": 24, | |
"op": 56, | |
"w": 600, | |
"h": 600, | |
"nm": "Loader 13", | |
"ddd": 0, | |
"assets": [], |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"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],[ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
layer.states = | |
stateA: | |
opacity: 0 | |
stateB: | |
opacity: 1 |
NewerOlder