Updated Icon/Simple toggles

SyntaxUI / syntaxui

Get free access to pre-built, Tailwind CSS-powered components, animations and effects - brought to life using Framer Motion. Just copy, paste and you're ready to go!

https://syntaxui.com

MIT License

810 stars 52 forks source link

Updated Icon/Simple toggles #180

Closed user-aiko closed 4 months ago

user-aiko commented 4 months ago

The Framer Motion Layout has been implemented correctly, based on my knowledge.

The current usage:

The parent component is a non-motion component with a non-animatable style property (in this case, Justify-content) that switches between 'end' and 'start'.
The child component is a motion component with a layout set to true.

Please note that animating x from 0 to 100% is more performant and reliable than manipulating the DOM. However, I updated the code based on @Ansub 's suggestion.

File modified:

src/showcase/components/toggle/IconToggle.tsx src/showcase/components/toggle/SimpleToggle.tsx

vercel[bot] commented 4 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
syntax-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 12, 2024 9:43am

Ansub commented 4 months ago

@ITs-AIKO afaik Framer Motion animations are powered by JS and don't directly impact DOM performance in the same way that traditional CSS animations or transitions might do.

Am I missing out on something here?

Ansub commented 4 months ago

so instead of changing Margin, we should simply do transform-x?

user-aiko commented 4 months ago

so instead of changing Margin, we should simply do transform-x?

Yes! 'x' because we are using framer motion.

Ansub commented 4 months ago

but i didn't get what the change is about in this PR then

user-aiko commented 4 months ago

but i didn't get what the change is about in this PR then

Used the layout property the right way. Please refer to framer motion docs for more information.

Ansub commented 4 months ago

The issue is that styling of this toggle is not consistent with the one in production, See this image:

CleanShot 2024-05-11 at 22 17 11@2x

whereas the toggle in your PR:

CleanShot 2024-05-11 at 22 18 19@2x

i actually liked the less gap in this PR tbh, but @epoll31 made this button so need to ask him if he is ok with this change

epoll31 commented 4 months ago

I prefer the uniform gap: where the gap in the side is the same as the gap on the top and bottom.

It the prod version, the gap is the same on all sides.

Can we modify the change to make this gap uniform? or was there a reason for the chance?

vercel[bot] commented 4 months ago

Someone is attempting to deploy a commit to the SyntaxUI Team on Vercel.

A member of the Team first needs to authorize it.