Questions tagged [framerjs]
Framerjs - JavaScript Framework for rapid prototyping animation and interaction on desktop and mobile.
framerjs
145
questions
11
votes
0
answers
1k
views
Exporting Framer X to React Native
Has anyone had any luck exporting Framer X prototypes to RN-consumable JSX? All I want is to export the UI prototype and animations that I made using Framer, so I can implement the logic using RN.
My ...
- 4,645
10
votes
4
answers
15k
views
In framer-motion, how to animate pure data like a number from 0 to 100?
How can I animate a pure number from 0 to 100 with a transition config?
<motion.div>
{num}
</motion.div>
- 781
9
votes
4
answers
5k
views
Determine springWithDamping and initialSpringVelocity based off from friction and tension
My design team gives us animation parameters using friction and tension. For instance:
Has a spring affect (280 tension and 20.5 friction) Over 0.3 seconds
Unfortunately, i've always guessed what ...
- 842
5
votes
1
answer
19k
views
Framer Motion: change color animation direction
In Framer Motion, I'm trying to get two colors to animate smoothly. The colors are red 'hsl(0, 100, 50)' and blue 'hsl(240, 100, 50)'. Unfortunately, the animation is going through the color wheel, ...
- 408
5
votes
1
answer
7k
views
Snapping to position onDragEnd with motionValues using Framer Motion and React
I'm using framer motion to create a swipe interaction in my project. I'm trying to make it so that when the user is done dragging the child, it will 'snap' back into a set position.
I've seen from ...
- 243
4
votes
3
answers
285
views
Framer doesn't see an npm package that exists
I'm creating a framer code component and I want to import a library with the following code:
import { registerCoreBlocks } from "@quillforms/react-renderer-utils"
import { FormObj } from &...
- 1,138
3
votes
2
answers
14k
views
How to use Framer Motions's when to control transition animation start
I am trying to set display:none on a parent element once the children stagger animations have completed. My li elements fade out and the parent ul should then update to display:none
I can set a delay ...
- 18.8k
3
votes
3
answers
5k
views
How do I make a continuous loop with the animate method?
How does one continuous loop an animation using animate? In this example, all I want to do is endlessly rotate a white square.
myBall = new Layer
x: 100
y: 100
width: 200
height: 200
...
- 2,883
3
votes
6
answers
10k
views
Repeating, infinite animation loop using framer.js
I'm trying to create a pulsating, looping animation effect using framer.js
I've loaded an image into a layer and I'd like to scale it up and down continuously. I can't figure out how to scale it down ...
3
votes
1
answer
242
views
How to increase contrast between colors generated from image?
Some details:
I'm making a small prototype in Framer, some kind a wallpaper app. I use vibrant.js to automatically pick colors from the images to add a bit of a tint to my interface. I use two ...
3
votes
0
answers
3k
views
Framer Motion - animation already done on page load - SSR problem?
I'm trying to create a really simple loader animation with Framer Motion, and I got stuck with some weird things happening.
When I reload the page animation seems to be already completed, and it doesn'...
- 43
3
votes
1
answer
2k
views
Framer API Scroll Component Horizontal Scrolling - React
I am trying to use the Framer API to implement a horizontal Scroll Component https://www.framer.com/api/scroll/ According to the documentation there is a direction property that can be used to set the ...
- 407
2
votes
2
answers
674
views
How to slow down Framer animations
I'm looking for a solution to slow down FramerJS animations by a certain amplitude.
In the Velocity Animation framework it's posible to do Velocity.mock = 10, to slow down everything by a factor of ...
- 2,030
2
votes
2
answers
2k
views
Fit Sketch Artboards on Every device in Framer.js
I have a prototype built, imported from Sketch with multiple artboards that are 640x1136. But I would like it to fit on all devices when I run it in Framer. Right now it only fits on iPhone 5 ...
- 944
2
votes
2
answers
3k
views
Combine dragging and animating drag position on click (animate x.set())
For a client we're building horizontally dragging rows of media items. Dragging horizontally using Framer-Motion works great, but I can't animate the x position on the click of a button.
This is the ...
- 51
2
votes
1
answer
3k
views
How do you get React Framer-motion to fire onClick events for mobiles when using the drag prop?
I'm currently using the React library Framer Motion to help animate some of the gestures I want in my App. I seem to be having an issue with the "drag" property for the "motion.div"...
- 85
2
votes
2
answers
4k
views
How to iterate through all the sublayers in Framer
sorry for stupid question, i need to animate all sublayers in some particular layer. How to iterate through all the sublayers?
2
votes
1
answer
2k
views
How to setup the initial value with framer motion useAnimate hook
The motion component has an initial prop:
<motion.div
initial={{ x: "100%" }}
animate={{ x: "calc(100vw - 50%)" }}
/>
while using useAnimate with useInView hook:
const [...
- 105
2
votes
0
answers
250
views
Framer support via Instant NPM and ESM
How best to use MUI components in Framer these days?
The last time I used MUI, there was a Framer folder in the code and I did an NPM install to access the Framer examples. This was possible via the ...
2
votes
0
answers
1k
views
Freezing/jumps when swiping Pages in Framer-Motion
I have an app I'm building with Framer Motion and I'm trying to disable vertical swiping whenever someone swipes to the left or right page. I noticed that there are "lag spikes" or "...
- 164
2
votes
1
answer
487
views
access other values in array in coffee script in a loop (framer.js)
Hi I'm fairly new to javascript and CoffeeScript, so I'm currently working on a prototype and learning the language simultaneously.
The following block of code does almost what I want it to do ...
- 25
2
votes
1
answer
79
views
How to shrink a layer in FramerJS
animationA = new Animation
layer: doc.canteen
properties:
x: 400
y: 1600
opacity: 0.5
curve: "bezier-curve(0.25, 0.1, 0.25, 1)"
here i tried using z value, it was scaled up. To scale down ...
- 21
1
vote
3
answers
11k
views
Framer: Check if element is into viewport
While using Framer Motion API to create interaction and animations on my site, I can not find how to use it in order to trigger an animation when something is on the screen.
For example, this SVG ...
- 1,540
1
vote
4
answers
12k
views
Module not found: Error: Can't resolve 'ReactDOM'
I am trying to import framer library in my project. The project itself compiles just fine if I don't import Hearts.tsx. However it fails just likee below if I import Hearts.tsx. Hearts.tsx imports ...
- 457
1
vote
1
answer
2k
views
I keep getting the following error: "Error: Cannot find module './framer'"
I keep encountering the same problem. I'm making a website for a barbershop and I am trying to use google api to add events into a google calendar. I installed googleapis and framer, but it keeps ...
- 11
1
vote
2
answers
580
views
mapping through all non-empty objects in react
I'm using Framer X (which uses react) to generate a bunch of components. I have an array of objects like so:
const chosenBets = [{}, { id: 1
label: "X"
odd: 2.63
oddIndex: 1
team_home: "...
- 3,386
1
vote
1
answer
6k
views
Framer-motion does not stagger children, no matter what I try
My JSX:
<motion.div className={styles.aboutGreeting}
variants={containerVariants}
initial='hidden'
animate='visible'
...
- 135
1
vote
1
answer
91
views
How to remove an item from array if it's been clicked (and if it already has been previously added to an array)?
How do you remove an item from array if it's been clicked (and if it already has been previously added to an array)?
I have a Framer X (React) prototype which pulls down football betting information ...
- 3,386
1
vote
1
answer
468
views
Listen for scroll on framer scrollComponent
I'm trying to check the deltaY in framer scroll event and execute a function only when deltaY == 0.
It appears that framer (written in coffeescript) does not have a way of checking for this. Is there ...
- 614
1
vote
1
answer
1k
views
Framer.js: how to get tap coordinates
I'm writing a Framer.js function to simulate the 'splash' effect when you tap a button or a layer, as per Google Material Design.
It looks something like this
tapSplash = (tapX,tapY) ->
...
- 1,155
1
vote
1
answer
2k
views
How to make an animation infinite loop using CoffeeScript in Framer.js?
I am trying to make a simple pulsing animation of a on-screen element in Framer.js and now it looks like this:
element.animate
properties: scale:1.3
element.on Events.AnimationEnd,->
this....
- 109
1
vote
2
answers
1k
views
How do I create animations for layers created in a for loop
Consider the two snippets for Collection Grid and Layer with Click Animation. The following will only add an animation listener to the last grid item (the layer at the 3:3 position):
rows = 3
cols = ...
- 2,883
1
vote
1
answer
1k
views
React Framer Motion - List with Staggered Children Animation Not Working on Removal
I have this repro here of a motion.ol and motion.li that appear and disappear. However, the animation on exit does not work on the motion.li.
The parent code:
const variantsBoxContainer: Variants = {
...
- 140k
1
vote
1
answer
860
views
Check if ANY item in an array is in a certain state: coffeescript
I have an array of buttons with a 'selected' and 'deselected' state. How do I go about checking if any button in the array is in the 'selected' state.
So essentially I want something like (using ...
- 181
1
vote
1
answer
614
views
How can i import the psd file and generate layers in framerjs
I am using windows and i have my psd file.i want to create a interactive prototype using framerjs. i have atom text editor and i have downloaded framerjs from http://framerjs.com/static/downloads/...
- 7,149
1
vote
1
answer
675
views
How to set different name for layers that are created inside for loop in framerJS
I like to set different layer name for layers that are created inside the for loop. Following is the code that is working, but it creates three layers named "circle" which prevents me from doing ...
user1203249
1
vote
1
answer
109
views
Performance issue with Frameless
I am facing severe lagging problems while running my Framer prototype on Frameless. I'm using iPhone 5c. I've cleared all the applications and the WiFi transfer rate seems fine. But still the ...
- 1,334
1
vote
2
answers
351
views
How can I listen for an event based on a common class/ object name instead of a unique layer in Framer JS?
I would like to return the unique name of the object that the user has clicked on but I can't find the solution. Below is what I'm trying to achieve but in CoffeeScript.
$(".class").click(...
- 368
1
vote
1
answer
339
views
Different Width's using FramerJs
I am trying to build tags in framerjs , where they can have auto width depending upon their text.
It is possible to have auto width for a layer or max-width
- 3,937
1
vote
1
answer
535
views
Framer.js generator - is it working?
I'm using the framer generator (v 3.0.33 (37)) to import something from Sketch Beta (v 3.0.4 (8156)). The import is successful, but when I open the .framer folder that is created I get the following ...
- 87
1
vote
0
answers
212
views
Framer Asymmetrical Grid Fill
Does anyone know how to correct Framer's asymmetrical grid alignment when using frames to fill width? If I use multiples of 1fr to fill the grid, everything aligns. If I set asymmetrical values (say, ...
1
vote
1
answer
956
views
How to scroll X while scrolling Y in ReactJS and Framer motion
How to scroll x on a div while the user keeps scrolling on the Y axis.
I want to recreate the "Our Work" section on https://nifty-template.webflow.io/ using ReactJS and Framer Motion.
...
- 11
1
vote
0
answers
1k
views
Framer Motion animation resetting when menu is opened
I have a fancy heading animation using whileInView to trigger, but when I open my menu drawer, the heading animations all reset to the initial state where they are all hidden.
The heading animation ...
- 336
1
vote
1
answer
889
views
Framer X - Custom transitions between Screens/Frames
I recently dove into Framer X, Javascript and React and think that something very essential is missing regarding custom transitions between screens (which are just "frames" in Framer).
What I want to ...
- 65
1
vote
1
answer
79
views
Getting specific key from Firebase in Framer
im really new in coding so my question might be very easy.
On image below you can see what i have in Firebase.
Here's what i have in my Firebase
In Framer im using this module and after writing ...
1
vote
0
answers
35
views
FramerJS: how can you animate similar layers in different locations on screen, simultaneously and repeatingly?
I am trying to create a scene of blinking stars where essentially you have multiple, similar layers (difference in size and x/y coordinates) animating across different locations on the screen, ...
- 947
1
vote
0
answers
20
views
Is it possible to open a framerJS project directly from the MacOS Finder?
MacOS finder supports opening files from the finder. Based on their extension a specified program will open.
FramerJS relies on a project folder which doesn't include this option.
Is there a way I ...
- 9,119
1
vote
1
answer
257
views
How to restart a SpeechRecognition function in Framer?
I want to build a function in Framer (coffeescript) where I can say a specific word as voice input and something happens. For example I say "apple" then a rectangle turns green. If I say "banana" it ...
- 11
1
vote
0
answers
69
views
Bubble exception outside Angular
I'm using AngularJS 1.5.x to dynamically add a javascript tag and code to the DOM, which will be executed by FramerJS.
Occasionally this will throw errors and is desired and expected.
FramerJS has ...
- 11
1
vote
0
answers
179
views
How to call function onclick on layer
Here i am using framerjs, i am trying to call function which changes the position of the other layers. when i click on layer product_scroller the value of curpage changes and replaced with ...
- 7,149