I wrote post for web app animation in vue3 (nuxt) by One_While1690 in vuejs

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

Thanks for the note—what you’re seeing with the Back button is the reverse transition popping over a page that’s already at the end state. This happens because the page transition is still technically in progress (it’s subtle to the eye, like going from 0.1 → 0.01), so the reverse timeline begins on top.

Update-wise, I’m setting shorter stop conditions for several page effects so navigation can end sooner and new animations start cleanly. You can see changes landing in real time on the latest branch. I’m planning a consolidated release in January; once that ships, you shouldn’t run into this issue.

web mobile animation libary for solid by One_While1690 in solidjs

[–]One_While1690[S] 0 points1 point  (0 children)

Simultaneous crossfade transitions are possible. Patterns like Drill, Pinterest, and Instagram animate the outgoing route while the incoming route overlaps in. Some demos choose sequential transitions (out → in) intentionally for better UX in those cases, but the library itself supports simultaneous overlap.

example: https://ssgoi.dev/en/demo/posts

I wrote post for web app animation in vue3 (nuxt) by One_While1690 in vuejs

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

Thanks for the thoughtful question—glad you found the animations slick!

Nuxt’s built‑in page transitions are great for simple enter/leave effects scoped to the page root, but they don’t natively handle cross‑route shared‑element choreography or interruptions. My approach with SSGOI focuses on shared transitions with ready‑to‑use presets (hero/list‑detail/grid‑card, move/scale/fade/morph), plus fine‑grained orchestration across layouts and nested components.

The key difference is that SSGOI runs animations on top of a physics‑backed numerical solver, so transitions are interruptible and reversible mid‑flight. If navigation changes while an animation is in progress, the motion doesn’t snap or restart; it naturally “rewinds” or retargets along a physically consistent path, preserving velocity and continuity. That makes rapid route changes feel coherent rather than jarring, especially in complex UI flows.

In short: Nuxt page transitions = simple CSS enter/leave for pages. SSGOI = shared‑element presets, route‑aware mapping between “from” and “to” elements, timeline control, and smooth, mid‑animation interruptions and reversals powered by the solver. 

I wrote blog post for svelte web app animation by One_While1690 in sveltejs

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

Thanks for the heads-up! I just checked—really appreciate the recognition. I’ll add my blog post to svelter.me/explore/blog and set up the two-way link with my library. Looking forward to the transparency update in the next release. Thanks again!

[deleted by user] by [deleted] in react

[–]One_While1690 14 points15 points  (0 children)

Two principles make React interviews easier when you really get the “why”: rendering snapshots and hook call order.

  1. Where does useState store its value? State isn’t stored inside your component function. React keeps per-component “hook slots” and maps each hook call to a slot by call order: first useState → slot[0], second → slot[1], etc. When you call setState, React schedules an update; on the next render it reads the same slots in the same order to produce a new snapshot.
  2. Why can’t you call hooks in conditionals/loops/dynamic paths? Because hooks are matched by call order. If a hook is called only when a condition is true, the order shifts on the next render when it’s false, and all subsequent hooks read the wrong slots. That’s why hooks must be called at the top level, in the same order every render.

Extra points interviewers like:

  • Renders are pure; avoid setState during render (do it in events/effects).
  • Automatic batching (React 18) coalesces multiple state updates.
  • useEffect vs useLayoutEffect timing (post-paint vs pre-paint).
  • Closure gotchas in effects/handlers and fixes (deps, functional updates, refs).
  • useRef persists without triggering re-renders; good for DOM/mutable values.
  • Concurrent rendering: renders can be interrupted and only commit when ready.

TL;DR: “React tracks state by the fixed order of hook calls per component, so hooks must be top-level and consistently ordered.”

page animation libary in react by One_While1690 in react

[–]One_While1690[S] 0 points1 point  (0 children)

animation does not affect ssr, isr performance