menu

Framer

Express your creative ideas through interactive design. Join the community for updates, support, resources, and more.

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
Steve Ruiz
@steveruizok
Viktor Renkema
@vrenkema
Fernando Hurtado
@fernando-hurtado
Koen Bok
@koenbok
Addison Schultz
@addison-schultz
Peri Langlois
@peri
Brian Lovin
@brian
Benjamin den Boer
@benjamindenboer
Koen Bok
@koen-bok
Matt Perry
@mattperry
Jordan Dobson
@jordandobson
Artem Riasnianskyi
@asci
Niels van Hoorn
@nvh
Eelco Lempsink
@eelco
Aroagilbo
@aroagilbo
Jurre Houtkamp
@jur
Iain Kettles
@iain-kettles
Steve Ruiz
@steve-ruiz
Jorn van Dijk
@jornvandijk
Floris Verloop
@floris
Edoardo Mercati
@markets
Sebastian Graz
@graz
Jordan Dobson
@jordanrdobson
Tim von Oldenburg
@tvooo
Patrick Camacho
@camacho
Nick Waelkens
@nickwaelkens
Marc Bouchenoire
@bouchenoiremarc
Monika Michalczyk
@monika-m
Posts
Chat
Members
Info
Show previous messages

March 17, 2020 at 7:21pm
what platform Are you guys using more often to connect with the framer community: Spectrum or Slack ?
  • reply
  • like
Spectrum is better overall, especially for search, but the Slack channel is also pretty active.
  • reply
  • like
Thanks
  • reply
  • like

March 23, 2020 at 7:09pm
So I was so excited to get my Framer Web invite. I opened it up and browsed for a minute, closed the tab and came back and now i cannot find how to get back. I have clicked the button from the original email but just brings me to my dashboard.
Any ideas? :)
  • reply
  • like

March 26, 2020 at 4:42am
Is there a way to make the exit animation only fire if a prop is true in react? Something like:
exit={{
opacity: isActivated ? [null, 1, 1, 1, 0] : 0,
rotate: [null, 2, 0],
y: [null, 50, 0],
zIndex: 1,
}}
Edited
  • reply
  • like

March 26, 2020 at 11:26pm
useEffect with isActivated in the dependency array
like-fill
1
  • reply
  • like
  • reply
  • like

March 27, 2020 at 12:41pm
So I was so excited to get my Framer Web invite. I opened it up and browsed for a minute, closed the tab and came back and now i cannot find how to get back. I have clicked the button from the original email but just brings me to my dashboard.
Any ideas? :)
Hey, the beta is at beta.framer.com. Are you looking for the project you were in? Check the Recents list.
  • reply
  • like
Is there a way to make the exit animation only fire if a prop is true in react? Something like:
exit={{
opacity: isActivated ? [null, 1, 1, 1, 0] : 0,
rotate: [null, 2, 0],
y: [null, 50, 0],
zIndex: 1,
}}
I might put
exit= {isActivated ? {} : { opacity: 1, y: 100, ...etc }
  • reply
  • like
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