Comments (5)
My suggestion is the following change. It works, but it might delay the animation a bit because the drawer might be too far outside of the viewport.
// Animation properties for framer-motion
let initial, animate;
switch (props.origin) {
case "left":
initial = { x: -window.innerWidth };
animate = { x: 0 };
break;
case "right":
initial = { x: window.innerWidth };
animate = { x: 0 };
break;
case "top":
initial = { y: -window.innerHeight };
animate = { y: 0 };
break;
case "bottom":
initial = { y: window.innerHeight };
animate = { y: 0 };
break;
}
from open-sesame.
Hi @devnull69, thanks for reporting this issue. If you're experiencing issues with the drawer animating in/out of view, I'd like to call attention to the visible
prop. The current build of this drawer component requires this prop for the component's default entry/exit animations. For more details on how to use and implement it, see the readme in this repository. If you're already using this prop and still experiencing this issue, let me know and I can investigate further. Thanks!
from open-sesame.
Hi @jordan-sussman and thank you for your feedback
This is my (non-working) implementation ... and the visible
prop is already part of it, right?
<Drawer.Root open={drawerOpen} onOpenChange={setDrawerOpen}>
<Drawer.Trigger>
<div
className={
"drawer " +
(designDirection === "rtl"
? "rightsidedrawer rtl:rotate-180"
: "leftsidedrawer")
}
>
<img src={drawerIcon} />
</div>
</Drawer.Trigger>
<Drawer.Content
className="content"
origin={designDirection === "rtl" ? "right" : "left"} // Where the drawer opens from
radius={10} // Border radius of the drawer
size={"50%"} // Depth of the drawer
visible={drawerOpen} // Required for animation
style={{ paddingTop: "30px" }}
>
<Drawer.Title></Drawer.Title>
<ReadOnlyViewWrapper />
</Drawer.Content>
</Drawer.Root>
from open-sesame.
@devnull69 thanks! Yeah, that looks correct. I'm currently on vacation but will investigate this when I return.
from open-sesame.
@devnull69 thanks for your patience! This should now be working per f2f0645
from open-sesame.
Related Issues (2)
- Wrong package name ? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from open-sesame.