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

Assigning different animationOptions to states on Coffeescript

In the code below, both states have the same animation properties. How can I assign different animation properties to each state? for check in aniCheck check.states.add one: opacity: 1 scale: 1 two: …
Diego Oriani
  • 1,647
  • 5
  • 22
  • 31
1
vote
1 answer

Framer.js: how to get tap coordinates

I'm writing a Framer.js function to simulate the 'splash' effect when you tap a button or a layer, as per Google Material Design. It looks something like this tapSplash = (tapX,tapY) -> tapSplashLayer = new layer backgroundColor:…
vedran
  • 1,145
  • 2
  • 13
  • 19
1
vote
2 answers

How can I listen for an event based on a common class/ object name instead of a unique layer in Framer JS?

I would like to return the unique name of the object that the user has clicked on but I can't find the solution. Below is what I'm trying to achieve but in CoffeeScript. $(".class").click(function(){ alert("You clicked on this specific…
Raja
  • 369
  • 2
  • 5
  • 18
1
vote
1 answer

Different Width's using FramerJs

I am trying to build tags in framerjs , where they can have auto width depending upon their text. It is possible to have auto width for a layer or max-width
Aman Virk
  • 3,909
  • 8
  • 40
  • 51
1
vote
1 answer

Framer.js Hammer.js Integration

I found this little gem from Koen Bok that integrates Hammer.js Events into Framer.js a couple of weeks ago. However, it's made for an older version of Hammer, which has been rewritten since. Theoretically, I can port it to the new version quite…
Maxi
  • 23
  • 3
1
vote
1 answer

framer.js studio PSD

So I am new framer.js and just imported a psd into the framer studio. The import went fine and I can see all my layers on the right I am just not sure how to target them. Lets say I have a layer named "footer" in my psd file, to target it would I…
Packy
  • 3,405
  • 9
  • 50
  • 87
1
vote
1 answer

How to make an animation infinite loop using CoffeeScript in Framer.js?

I am trying to make a simple pulsing animation of a on-screen element in Framer.js and now it looks like this: element.animate properties: scale:1.3 element.on Events.AnimationEnd,-> this.scale = 1 locationUn.animate properties:…
Rexroth
  • 109
  • 1
  • 12
1
vote
2 answers

How do I create animations for layers created in a for loop

Consider the two snippets for Collection Grid and Layer with Click Animation. The following will only add an animation listener to the last grid item (the layer at the 3:3 position): rows = 3 cols = 3 gutter = 16 width = 96 height = 96 for…
nipponese
  • 2,813
  • 6
  • 35
  • 51
1
vote
1 answer

Framer.js generator - is it working?

I'm using the framer generator (v 3.0.33 (37)) to import something from Sketch Beta (v 3.0.4 (8156)). The import is successful, but when I open the .framer folder that is created I get the following message in framer studio: # I could not find an…
kyle
  • 87
  • 1
  • 1
  • 8
1
vote
1 answer

Is it possible to change the colour of a button on mouse hover in framer?

I want to animate a colour change of a button in framer, so that when the mouse hovers over the button, the button changes colour. Is this possible, if so, how? Thank you
user2953989
  • 2,791
  • 10
  • 36
  • 49
0
votes
0 answers

Error while importing Framer Web component to Next js

I keep getting this error while I try to import some framer web comonents to my next js project Is there some work around??? have been trying to fix this for hours now. Thanks I was trying to import a smart componrnt from framer web to my next js…
juggernaut695
  • 1
0
votes
1 answer

How to setup the initial value with framer motion useAnimate hook

The motion component has an initial prop: while using useAnimate with useInView hook: const [scope, animate] = useAnimate(); const isInView = useInView(scope, { once:…
leon
  • 75
  • 1
  • 8
0
votes
0 answers

Animated cursor on framer

I have been trying to achieve the animated cursor functionality on framer using react code but have not been getting any result. please help me with the code I have tried to write the code in react but not getting result
anieanim
  • 1
  • 1
0
votes
0 answers

calling click function of another element from a button in typescript

I can call click function of an element with plain javascript but the same code doesn't work with react / typescript when I try to add an onclick function to a separate button. here's the plain javascript code that works : var elements =…
linux enthusiast
  • 1
0
votes
0 answers

Overriding text color in React + Framer?

I'd like to override the text color of my Component to make it a multi-stop linear gradient. Following the code examples provided by Framer, this is what I've tried: export const withCustomColor = (Component): ComponentType => { // This part of…
UserDude
  • 323
  • 1
  • 3
  • 18
1 2 3
…
9 10