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
1
vote
1 answer

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
  • 31
  • 3
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
  • 2,162
  • 2
  • 24
  • 35
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
  • 65
  • 9
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
  • 2,162
  • 2
  • 24
  • 35
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
  • 107
  • 2
  • 11
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
  • 11
  • 3
1
vote
3 answers

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 framer. Unfortunately I am getting an error when I…
ilteris
  • 437
  • 6
  • 21
1
vote
1 answer

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 this code: response = (names) -> print…
Anatoly Sidorov
  • 13
  • 3
1
vote
0 answers

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, simultaneously and infinitely. I have attempted to…
Colin Sygiel
  • 767
  • 2
  • 12
  • 23
1
vote
0 answers

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 can open a framer project by maybe opening one of…
Evolve
  • 8,466
  • 11
  • 46
  • 58
1
vote
1 answer

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 turns yellow. So far it works only once and then…
ocha
  • 11
  • 1
1
vote
1 answer

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 another way to say (in pseudocode): if the change…
EJW
  • 544
  • 1
  • 7
  • 21
1
vote
1 answer

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 Framer coffeescript): for button in buttonArray …
aalok89
  • 141
  • 4
  • 13
1
vote
0 answers

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 it's own way of handling errors and displaying them…
James Ryan
  • 11
  • 1
1
vote
0 answers

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 product_details and function changepos() will be called. but…
CJAY
  • 6,055
  • 16
  • 52
  • 90
1
2
3
…
8 9