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
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
  • 2,010
  • 11
  • 35
  • 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
  • 954
  • 3
  • 18
  • 37
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
1
vote
1 answer

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. Screenshot
DeadMan
  • 11
  • 3
1
vote
1 answer

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 = { hidden: { opacity: 0, transition: { …
Patrick Desjardins
  • 136,852
  • 88
  • 292
  • 341
1
vote
0 answers

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 function firstly splits up a string into spans…
Jay
  • 326
  • 2
  • 18
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
  • 2
1
vote
2 answers

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
  • 18,391
  • 17
  • 66
  • 104
1
vote
3 answers

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 draws correctly, but Framer does not wait for the…
Biomehanika
  • 1,530
  • 1
  • 17
  • 45
1
vote
2 answers

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: "Bournemouth" team_away: "West Ham United" matchCardIndex:…
a7dc
  • 3,323
  • 7
  • 32
  • 50
1
vote
1 answer

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" tag. e.g.
Bigboybob
  • 75
  • 2
  • 10
1
vote
1 answer

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 down from an API, like so: const API =…
a7dc
  • 3,323
  • 7
  • 32
  • 50
1
vote
1 answer

Functional Component data not re-rendering on update in Framer Preview

I am making a list view which dynamically has to change every few seconds when the data source list updates. The list from where it is getting the data is essentially const area = [a1,a2,a3,.....,a50] From this list, I setState([]) of another list…
Bhavna
  • 117
  • 1
  • 2
  • 13
1
vote
1 answer

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 achieve is similar to what MengTo is doing in his…
Schnodahipfe
  • 55
  • 7
1
2
3
…
9 10