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.

145 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,617
  • 3
  • 28
  • 59
9
votes
4 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
  • 772
  • 1
  • 21
  • 31
8
votes
3 answers

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? {num}
Yokiijay
  • 711
  • 2
  • 7
  • 18
5
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
  • 233
  • 1
  • 4
  • 15
4
votes
1 answer

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, making pit stops at orange, yellow, green, cyan,…
John Miller
  • 388
  • 2
  • 8
  • 23
3
votes
1 answer

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 direction of the scrolling. Here's the simple…
Alex P
  • 407
  • 6
  • 15
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
3
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
  • 417
  • 4
  • 8
3
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,813
  • 6
  • 35
  • 51
2
votes
0 answers

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 old Framer Desktop App. But the new version of…
Lincoln Mitchell
  • 21
  • 2
2
votes
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
  • 33
  • 1
  • 5
2
votes
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
  • 163
  • 1
  • 2
  • 15
2
votes
2 answers

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 general idea: This is the component as I…
Wiljan
  • 51
  • 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…
mooreEffort
  • 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
1
2 3
…
9 10