sonovice Posts - Answer Overflow

sonovice

•Created by sonovice on 9/16/2024 in #support

Animate page transition

I am trying to animate route changes with Motion One. However, I seem to not get the overall logic of Solid Router since no route is shown at all in my MWE:

import {render} from 'solid-js/web';
import {A, Route, Router} from '@solidjs/router';
import {Motion} from 'solid-motionone';


const Home = () => {
  return (
    <>
      <p>Home</p>
      <A href="/about">About</A>
    </>
  )
}

const About = () => {
  return (
    <>
      <p>About</p>
      <A href="/">Home</A>
    </>
  )
}

const RouteAnimation = (props: any) => (
  <Motion
    animate={{opacity: 0.75, transition: {duration: 1}}}
    exit={{opacity: 0.25, transition: {duration: 1}}}
  >
    <Route path={props.path} component={props.component}/>
  </Motion>
);

const App = () => {
  return (
    <>
      <Router>
        <RouteAnimation path="/" component={Home}/>
        <RouteAnimation path="/about" component={About}/>
      </Router>

    </>
  )
}

render(() => <App/>, document.getElementById('root')!);

import {render} from 'solid-js/web';
import {A, Route, Router} from '@solidjs/router';
import {Motion} from 'solid-motionone';


const Home = () => {
  return (
    <>
      <p>Home</p>
      <A href="/about">About</A>
    </>
  )
}

const About = () => {
  return (
    <>
      <p>About</p>
      <A href="/">Home</A>
    </>
  )
}

const RouteAnimation = (props: any) => (
  <Motion
    animate={{opacity: 0.75, transition: {duration: 1}}}
    exit={{opacity: 0.25, transition: {duration: 1}}}
  >
    <Route path={props.path} component={props.component}/>
  </Motion>
);

const App = () => {
  return (
    <>
      <Router>
        <RouteAnimation path="/" component={Home}/>
        <RouteAnimation path="/about" component={About}/>
      </Router>

    </>
  )
}

render(() => <App/>, document.getElementById('root')!);

Any help would be a appreciated.

13 replies

Gaming

Programming