menu

Framer

The best prototyping tool for teams. Join our Discord chat for weekly classes and real-time help with Framer. http://framer.com/r/discord?utm=spectrum

Channels
Chat
view-forward
# All channels
view-forward
# General
view-forward
# Announcements
view-forward
# Bug Reports
view-forward
# FAQ
view-forward
# Feature Requests
view-forward
# Learn
view-forward
# Meetups
view-forward
# Resources
view-forward
# Snippets & Tips
view-forward
Team
Viktor Renkema
@vrenkema
Fernando Hurtado
@fernando-hurtado
Addison Schultz
@addison-schultz
Koen Bok
@koenbok
Peri Langlois
@peri
Brian Lovin
@brian
Benjamin den Boer
@benjamindenboer
Jordan Dobson
@jordandobson
Koen Bok
@koen-bok
Matt Perry
@mattperry
Artem Riasnianskyi
@asci
Eelco Lempsink
@eelco
Niels van Hoorn
@nvh
Aroagilbo
@aroagilbo
Jurre Houtkamp
@jurre
Steve Ruiz
@steve-ruiz
Iain Kettles
@iain-kettles
Jorn van Dijk
@jornvandijk
Edoardo Mercati
@markets
Floris Verloop
@floris
Sebastian Graz
@graz
Jordan Dobson
@jordanrdobson
Patrick Camacho
@camacho
Nick Waelkens
@nickwaelkens
Marc Bouchenoire
@bouchenoiremarc
Monika Michalczyk
@monika-m
Posts
Chat
Members
Info
Show previous messages

March 27, 2020 at 12:43pm
Another q, has anyone been able to animate the height of a <motion.div /> based on its computed height? So it changes based on what children are rendered?
This sounds like a perfect fit for the magic prop coming to the library soon in 2.0!
  • reply
  • like

March 29, 2020 at 4:35am
Does anyone have strategies for managing a motion.div that may have 2 or more entry/exit animations?
  • reply
  • like
I basically have a transition where you can move between two image views, one where you view the entire image standalone, and another gallery view where you can cycle between the different elements that come together to make the standalone.
  • reply
  • like
In the case where I swap between the standalone and gallery views, I'd like the motion.div to move along the y axis, but when cycling through the sub-images, the div should transition horizontally
  • reply
  • like
I'm trying to use the custom prop on my motion.div, passing in an array containing my direction (for pagination on the horizontal gallery transition) and isGalleryView state variables
  • reply
  • like
I guess the solution to my problem would be if I could somehow determine whether direction or isGalleryView updated, but I'm not sure how to get the prevState in my custom prop
  • reply
  • like
Am I over complicating this? x)
  • reply
  • like
Could you knock together an example in codesandbox? I bet we could figure that out.
  • reply
  • like

March 30, 2020 at 12:56am

March 31, 2020 at 11:52am
Heyo! Been trying out framer-motion for a while now, after fiddling with react-spring.
I'm digging the declarative nature of the API and I'm wondering what the best way to go about the following would be:
I've got an element which has multiple possible states. The transition value will be opacity, but for demonstration purposes I used color. Some of the states are a fixed value, while a few others are using a looping animation.
The animation should switch seamlessly when changing from any one state to the other, meaning that I can't hardcode the from value in the looping animation variants, since it will "snap" to the from value when it switches to a variant with a looping animation.
If I don't use it, it will instead loop back to the color that was the value when the state changed.
For instance, let's say that I'd need the "not tracking" and "idling" animations to loop between gray and their respective end colors (red / yellow)-
I'd probably need something like fromValueButAfterTheFirstLoopIsDone 🙈 I don't really know how to approach the issue using MotionValues and other tools available.
Anyway, I've knocked together an example here to better illustrate it, and any help is greatly appreciated!
Edited
  • reply
  • like

April 1, 2020 at 9:05am
Hi, everyone, I recently discovered Framer Motion and I absolutely love it! But I've already run into my first roadblock. Maybe you've experienced this before? I am using the motion.custom() function to provide animation to an existing Material UI component as well as on a custom component I created but neither of them are working. Do you mind checking out my issue?
And there's the sandbox link: https://stackblitz.com/edit/framer-motion-mui-example?file=QuizButton.js Just check out the output for the first two buttons in each row. The animate prop is being added as an attribute to the element instead of as styles.
  • reply
  • like

April 1, 2020 at 6:44pm
this is kind of what I'm getting at:
  • reply
  • like
when clicking swap I want the gallery view to move vertically, but when clicking the arrows i want it to move horizontally
  • reply
  • like
Any ideas?
  • reply
  • like

April 2, 2020 at 5:09pm
Anyone have any ideas here? :/
  • reply
  • like

April 5, 2020 at 5:27am
Hi Everyone,
I hope you have a nice weekend. I have a question about manipulating the field shared by multiple instances.
Let's say I have a code component A:
export class A extends React.Component {
static threshold = 50;
//......
static defaultProps = {
value: 20
}
//......
render(){
return this.props.value > A.threshold ? <Frame1/>: <Frame2/>;
}
}
So the idea is that the instance of A will show <Frame1/> or <Frame2/> according to the comparison of this.props.value and A.threshold, where this.props.value can be changed by an override or a property control, and every instance will use the same threshold since it is a static field of A. I am also thinking to provide another component B (dropdown box, slider, etc.) for the users to adjust the static threshold. I know I can make the threshold as another instance property instead of a static field, so that another component can change the threshold via an override. But the downside will be every instance of A need to be bound to the override manually. I am looking for a cleaner way to do it, like making every instance share the same field, and component B can just manipulate that field. Please let me know if there's any way to do it. Thank you very much!
Edited
  • reply
  • like

April 5, 2020 at 12:58pm
this is kind of what I'm getting at:
Hey, I'll take a look!
  • reply
  • like

April 6, 2020 at 6:50pm
Thank you!! :D
  • reply
  • like

April 8, 2020 at 5:41pm
I just updated to the latest Framer X Beta, and I feel it's quite buggy though. When I open my working project which has a couple of code components already, I can't find the code panel unless I create one more code component. And the "Lock Screen" in preview seems not working in this Beta as well.
  • reply
  • like
In the latest Beta, the code editor doesn't close the parenthesis automatically, and hotkey for // doesn't work.
  • reply
  • like

April 30, 2020 at 7:52am
Hello everyone. Quick question here. Is it possible to animate the svg path d attribute. Like say when you want to morph one svg path into another with framer-motion? Tried to browse every section of the unsearchable docs(https://www.framer.com/api/motion/) for any hint but nothing shows up. Thanks in advance.
  • reply
  • like
Oh found, this issue here, https://github.com/framer/motion/issues/451 , let me try it out.
  • reply
  • like

May 11, 2020 at 5:41pm
Hello everyone, I am using Framer Motion for animating a list of items in a container, I used staggering for children. Each item has whileHover and whileTap props which make them fire even if items are still animating. Any ideas on how I can solve that? (I want the whileHover and whileTap props to be activated only after the animation of the items ends)
  • reply
  • like

May 26, 2020 at 9:57pm
Any suggestions for using custom fonts?
  • reply
  • like

May 28, 2020 at 11:22am
import React, { useState, useEffect, useRef } from "react"
import { motion, transform, useSpring } from "framer-motion"
import "./Frame.css"
import frame from "../Assets/frame.png"
export default ({ traversed }) => {
console.log("traversed", traversed)
const [height, setHeight] = useState(0)
useEffect(() => {
setHeight(
Math.max(document.documentElement.clientHeight, window.innerHeight)
)
})
const scale = traversed < 5 ? 2 : 0.4
return (
<div className="wrapper-Frame">
<motion.img
animate={{
scale,
y: height * (traversed - 6.5) - 20,
}}
transition={{
ease: "easeOut",
duration: 0.4,
}}
style={{ width: "100%", margin: "0 auto" }}
src={frame}
/>
</div>
)
}
Here ,
traversed=DIVV.scrollTop/Math.max(document.documentElement.clientHeight, window.innerHeight)
this animation works fine on my pc but for different screen sizes it fails , can someone suggest changes?
Edited
  • reply
  • like