Stack Overflow
Stack Overflow

Questions tagged [framerjs]

Framerjs - JavaScript Framework for rapid prototyping animation and interaction on desktop and mobile.

Framer.js is an open source JavaScript framework for rapid prototyping. It allows you to define animations and interactions, complete with filters, spring physics, 3D effects and more.

A prototyping tool for animation and interaction on desktop and mobile.

Framer can help you to quickly build interactions and animations. Built for designers and integrates with Photoshop. Great alternative to Quartz Composer, Flash or Keynote.

129 questions
11
votes
0 answers

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 current inclination is to open the TSX code for…
Anshu Dwibhashi
  • 4,375
  • 1
  • 23
  • 55
8
votes
3 answers

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 these values convert to, and eyeball it, if it…
Joshua Hart
  • 766
  • 1
  • 17
  • 28
3
votes
1 answer

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 the docs that you can use a spring to animate a…
Jesse Sliter
  • 201
  • 1
  • 3
  • 12
3
votes
1 answer

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 vibrant color profiles: "DarkMuted" - for the…
Anton Kosarchyn
  • 31
  • 4
2
votes
1 answer

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 except for one important thing. Any help would be…
user6880664
  • 25
  • 3
2
votes
1 answer

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 i thought we should use - value, then also it…
Madhan Raj
  • 21
  • 1
2
votes
2 answers

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 10. Either the docs are lacking in the respect, or…
Paolo Bernasconi
  • 1,890
  • 11
  • 32
  • 54
2
votes
2 answers

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 resolution. What do I need to do in order for the…
evan
  • 884
  • 2
  • 15
  • 34
2
votes
6 answers

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 and loop through the animation indefinitely. This…
Goren Berdichevsky
  • 359
  • 3
  • 8
2
votes
2 answers

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?
Sergey Prostov
  • 25
  • 1
  • 6
2
votes
3 answers

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 borderRadius: "20px" backgroundColor:…
nipponese
  • 2,493
  • 6
  • 29
  • 47
1
vote
0 answers

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't repeat as I specified in transition prop. My…
Marcin
  • 23
  • 1
  • 3
1
vote
1 answer

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 saying that it can't find the framer module. I even…
Error 404
  • 11
  • 1
1
vote
0 answers

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 "freezes", and the swiping isn't smooth. When you swipe left/right…
Ajay Pillay
  • 77
  • 6
1
vote
1 answer

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 in the transition, but trying to tap into the…
Samuel Goldenbaum
  • 15,346
  • 13
  • 51
  • 87
1
2 3
…
8 9