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
# Learn
view-forward
# Meetups
view-forward
# Resources
view-forward
# Snippets & Tips
view-forward
Team

How to deal with Animate Presence within a Stack? (Need a CSS Hero)

July 14, 2020 at 4:40pm

How to deal with Animate Presence within a Stack? (Need a CSS Hero)

July 14, 2020 at 4:40pm
  1. I'm trying to use Animate Presence, but it lives within a stack. In the half-second the entering and exiting child are both mounted it forces it into a layout row which makes the animation hop around.
  2. I tried to use a Frame, but I wanted to use Stack because it can fit-content. When I use the frame the width automatically shrinks to 0.
  3. If I try to use a frame, what's not shown here is that the children could be any length of text which is hard to calculate before it hits the DOM.
https://framer.com/projects/Help-jMDMYTPcYIiC1XUVdDI3

July 15, 2020 at 9:26pm
replied in workplace :) I'll look into seeing if there is a bug here / if there is another approach without needing to separately add framer-motion
For anyone else stumbling upon this -> an approach that works:
  • hiding some 0 opacity text to stabilize the resizing
  • using the new framer-motion layout prop for scale distortion correction
Edited
  • reply
  • like