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
Team
Posts
Chat
Members
Info
Show previous messages

March 29, 2020 at 4:38am
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

July 29, 2020 at 5:26am
I have tried to implement the transitions on position and padding property which changes it's values on page scroll. On initial page load, the default position is fixed to bottom, as user scrolls to the top of the page, the position of the container will changes to relative. I have seen some lag when integrated with actual code and the transitions aren't smooth when the position changes it feels like it jumps and sit. Could some one please help what I have implemented are with the standards of framer motion. Am very new to this library, need some support.
  • reply
  • like

September 17, 2020 at 2:51am
How do I import public packages that is installed before to a code component?
  • reply
  • like