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
0
votes
0 answers

Hoverable Image not displaying in Framer

I have created a Hoverable Image component in React with the Framer Motion library. The component works perfectly when tested locally, but when I try to use it in Framer, the image does not display. I have checked that the component is imported…
Vincent Giacalone
  • 1
0
votes
0 answers

delayChildren is being applied to child elements hover animation

I am stumbling across some weird behavior. When my parent variant has a transition for delayChildren + staggerChildren, my child element's animation when un-hovering is having the delayChildren being applied. Is that the normal behavior? I've…
user17443811
  • 103
  • 3
0
votes
0 answers

Import typewriter NPM doesn't work in framer. Error "Identifier x has already been declared"

I'd like to use external npm to create a new component on framer app. I've imported Typewriter effect from NPM module to framer but it keeps throwing an error Error in Typewriter.tsx. Identifier MyTypewriter has already been declared I'm not sure…
Tue Day
  • 1
0
votes
1 answer

Why does my eventListener works only once?

Ive been trying to make this page where you can change object when clicking a key, but the eventlistener i am using works only once i select the screen that it is set on. const onKeydown4 = (e) => { if (e.key == "w") …
Cublaiiii
  • 31
  • 3
0
votes
0 answers

Framer - cannot removeEventListener after changing screen

I am trying to make a page where you can change a type of two sets of objects(by pressing a key) the size is a value that is being passed to another page, where you can change only the second row objects. when i run the page where you are not…
Cublaiiii
  • 31
  • 3
0
votes
0 answers

Start multiple animations simultaneously in Framer Motion

I'm new to Framer Motion (and animations in general) and am trying to replicate the below GSAP effect https://codepen.io/cameronknight/pen/pogQKwR I can achieve the reveal effect and scale effect individually, but when applying both animations, only…
Ryu
  • 1
0
votes
1 answer

How to use useInvertedScale with the latest framer motion version in react js?

I use the useInvertedScale hook imported from framer-motion@1.6.0 and it throws an error useInvertedScale is not imported with the latest version of framer-motion . This is how I use it : import React from "react"; import { motion, useInvertedScale…
Mehdi Faraji
  • 2,574
  • 8
  • 28
  • 76
0
votes
0 answers

Framer Motion cannot animate rotateZ property

I am using variants (Framer motion) to animate a component from initial to animate state in React, and one of the animated properties include rotateZ property, which does not animate at all. All others properties (opacity and x) animate. Can anyone…
Sohail Saha
  • 483
  • 7
  • 17
0
votes
1 answer

Framer-Motion Exit Animation not firing on outer parent

Using AnimatePresence here from framer-motion and the exit animation of the outer parent does not seem to fire. The enter animations fire for all 3 elements. For the exit animaions, only the 2 children's exit animations fire. The outer parent…
dazulu
  • 11
  • 2
0
votes
1 answer

Converting exact animations from desktop to phone (FRAMER API)

so I encountered with the weird problem. So I'm using React and animating page with FRAMER API. So what I'm doing: On specific ScrollY, let's say 900, some animation pops up. However, when there's a flexbox, it looks different on phone (one element…
Mantofka
  • 206
  • 1
  • 12
0
votes
1 answer

Framer / React: Can't change focus state of Text Input onClick / onChangePage

This is a Framer/React question: I have a bunch of text fields in a "page" component and I want the focus to shift on every "page" change. There's a button controlling the pager but no trigger (onPageChange / onClick) is changing the attribute of…
Tom Bar-Gal
  • 209
  • 2
  • 4
  • 13
0
votes
1 answer

How do I access Framer hook from another component

I've a useState Hook set up in a file carousel.tsx export function Carousel({ children }) { //Set Active State Carousel Item const [active, setActive] = React.useState("default") //Create Props for Carousel items function…
ptamzz
  • 9,235
  • 31
  • 91
  • 147
0
votes
1 answer

Framer X - how to jump to next page automatically

I recently dove into Framer X to make the prototype, and in some page I want to play the gif to demonstrate the process of loading and after that it will jump to next page automatically may be after 3s, although I haven't find any resources in the…
Highway 61
  • 1
  • 1
0
votes
1 answer

Animate does not work with whileHover in React

I'm currently facing this problem where my animate refuse to work despite my scale being triggered on hover. I went through the documentation and still can't figure it out. What did I miss out? Help! Here's my code and warning from browser: …
azriebakri
  • 1,131
  • 2
  • 11
  • 36
0
votes
1 answer

Setting Up an AG-Grid Component in FramerX

I'm working on a prototype in FramerX, and our production software uses Ag-Grid for a large number of components. I need to be able to incorporate Ag-Grid in my latest prototype. Does anyone know how I can go about setting this up at the most basic…
Ryan Brooks
  • 101
  • 2
  • 8
1 2 3
…
9 10