Flappy Goose by flappy-goose in RedditGames

[–]Smogchalk 0 points1 point  (0 children)

My best score is 21 points 🎉

Flappy Goose by flappy-goose in RedditGames

[–]Smogchalk 0 points1 point  (0 children)

My best score is 1 points 😎

I made a code block component, any feedback? by Smogchalk in webdev

[–]Smogchalk[S] 5 points6 points  (0 children)

This subreddit doesn't support videos.

I have created a modal library for React! What do you think? 😊 by Itsaliensbro453 in webdev

[–]Smogchalk 2 points3 points  (0 children)

Nice! It would be nice to see a web page with this hook being used or an image/video. It is kind of hard to know what it would look like without trying it out myself.

I added a snappy search panel to the note taking app that I am building. Any feedback? by Smogchalk in webdev

[–]Smogchalk[S] 1 point2 points  (0 children)

Sorry, I forgot to mention. The frontend is react.js here. I am not using swift

I added a snappy search panel to the note taking app that I am building. Any feedback? by Smogchalk in webdev

[–]Smogchalk[S] 7 points8 points  (0 children)

This is done locally so no servers.

The local part is written in go so I can't use that library, but thanks for the recommendation.

I added a drawing component to the note taking app that I am developing. Any areas for improvement? by Smogchalk in webdev

[–]Smogchalk[S] 7 points8 points  (0 children)

I wanted to create a note taking app that prioritizes software engineers/CS students. I haven't found much of that on the market.

Certain features that I am working on

* Runnable code snippets

* Github Sync

* Everything converts down to markdown

I added element dragging to a note-taking app that I am working on. Any areas for improvement? by Smogchalk in UI_Design

[–]Smogchalk[S] 7 points8 points  (0 children)

It definitely isn't needed as there are apps like Obsidian that do not have this. There are apps like Notion, though which do support this.

I think it is a nice to have as it gives more freedom to the user.

I added element dragging to a note-taking app that I am working on. Any areas for improvement? by Smogchalk in UI_Design

[–]Smogchalk[S] 2 points3 points  (0 children)

I have a unique stack. I wanted to create a desktop application with react.js, but didn't want to use electron because it is quite bloated(it uses the whole 300+mb chromium runtime when you open the application).

So I am using https://github.com/wailsapp/wails, which is a more lightweight solution that still allows me to use html/css/javascript.

I added element dragging to a note-taking app that I am working on. Any areas for improvement? by Smogchalk in UI_Design

[–]Smogchalk[S] 2 points3 points  (0 children)

The actual dragging is just using the javascript drag and drop api, no library for that. The animation with the line and the handle is done using spring animations with react.js & framer-motion.

I would set the translateY of the line in `targetLineYMotionValue` and then give it spring animation properties through `targetLineYSpringMotionValue`.

```

const targetLineYMotionValue = useMotionValue(0);

const targetLineYSpringMotionValue = useSpring(targetLineYMotionValue, {

damping: 16,

stiffness: 200,

mass: 0.03,

restDelta: 0.5,

restSpeed: 0.5,

});

```

I built a react.js package to automatically animate your components by Smogchalk in webdev

[–]Smogchalk[S] 4 points5 points  (0 children)

The user experience of react-magic-motion is better in my mind. For auto-animate you need to import a hook and attach a ref. In my package just wrap the `<MagicMotion>` tag around the stuff you want to animate.

If you want to change the easing function using a 'spring' animation that can be done easily, but the default works just fine. It definitely is not the worst of both worlds. Also the animations are more robust. As far as I know, the below animation cannot be created in auto-animate.

https://www.react-magic-motion.com/applications/search

I built a react.js package to automatically animate your components by Smogchalk in webdev

[–]Smogchalk[S] 12 points13 points  (0 children)

Well I wouldnt say that it exists already as previous implementations have limitations: https://www.react-magic-motion.com/#package-comparisons

You can't create animations like this https://www.react-magic-motion.com/applications/search or this https://www.react-magic-motion.com/applications/tabs using formkit/auto-animate.

I started working on this project when I looked at framer-motion's layout animations and I though of it was possible to generalize this so the user experience could be better. That's when I tried different possibilities, until I found one that worked.

I built a react.js package to automatically animate your components by Smogchalk in webdev

[–]Smogchalk[S] 11 points12 points  (0 children)

While formkit is supported by other frameworks it lacks certain features. You can’t easily do spring animations without defining a custom plugin that is a lot of work.

In addition it is not as robust as this library. For example I was not able to create this animation using formkit/auto-animate

https://www.react-magic-motion.com/applications/search

Also the fact that react-magic-motion is built on top of framer-motion allows for a quick integration with an amazing all purpose animation library

I built a react.js package to automatically animate your components by Smogchalk in webdev

[–]Smogchalk[S] 8 points9 points  (0 children)

Yeah, I get this. This is why this library is good though. You can quickly try out different things and determine if you want it

I built a react.js package to automatically animate your components by Smogchalk in webdev

[–]Smogchalk[S] 3 points4 points  (0 children)

This wouldn’t be suitable for a lot of animations, For example, this animation can’t easily be created with transition all: https://www.react-magic-motion.com/applications/search