ClipFusion-org/clipfusion
1
1
Fork 0
mirror of https://github.com/ClipFusion-org/clipfusion.git synced 2025-08-05 18:15:08 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

made sidebar trigger animation smoother

Browse Source
This commit is contained in:
corgifist 2025-07-27 22:57:40 +03:00
parent 6ad064c9c1
commit acd0762f82
2 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/sidebar-trigger-adjustable/SidebarTriggerAdjustable.tsx
View File

@ -4,7 +4,7 @@ import { cn } from "@/lib/utils";
import { ComponentProps, useEffect, useState } from "react"; import { ComponentProps, useEffect, useState } from "react";
const easeSlide = (x: number) => ( const easeSlide = (x: number) => (
1 - Math.pow(1 - x, 2) x
); );
export const SidebarTriggerAdjustable = (props: ComponentProps<"div">) => { export const SidebarTriggerAdjustable = (props: ComponentProps<"div">) => {
@ -12,8 +12,17 @@ export const SidebarTriggerAdjustable = (props: ComponentProps<"div">) => {
const [windowHeight, setWindowHeight] = useState(1); const [windowHeight, setWindowHeight] = useState(1);
const isMobile = useIsMobile(); const isMobile = useIsMobile();
let ticking = false;
useEffect(() => { useEffect(() => {
const handleScroll = () => setScrollY(window.scrollY); const handleScroll = () => {
if (!ticking) {
window.requestAnimationFrame(() => {
setScrollY(window.scrollY);
ticking = false;
});
}
};
const handleResize = () => setWindowHeight(window.innerHeight); const handleResize = () => setWindowHeight(window.innerHeight);
setWindowHeight(window.innerHeight); setWindowHeight(window.innerHeight);
@ -31,7 +40,7 @@ export const SidebarTriggerAdjustable = (props: ComponentProps<"div">) => {
slideAmount = easeSlide(slideAmount); slideAmount = easeSlide(slideAmount);
return <div {...props} style={{ return <div {...props} style={{
paddingLeft: `calc(var(--spacing) * 12 * ${slideAmount})`, marginLeft: `calc(var(--spacing) * ${12 * slideAmount})`,
paddingTop: `calc(var(--spacing) * ${isMobile ? 1 : 3} * ${slideAmount})` marginTop: `calc(var(--spacing) * ${(isMobile ? 1 : 3) * slideAmount})`
}}></div>; }}></div>;
} }

2
src/components/static-sidebar-trigger/StaticSidebarTrigger.tsx
View File

@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
import { SidebarTrigger, useSidebar } from "../ui/sidebar"; import { SidebarTrigger, useSidebar } from "../ui/sidebar";
export const StaticSidebarTrigger = () => { export const StaticSidebarTrigger = () => {
const { open } = useSidebar();
return ( return (
<> <>
<div className="ml-10"/> <div className="ml-10"/>