SolidJS•2y ago

add fade-in and fade-out animations when navigating routes (using solid-routes)

o/ is there any way to add some sort of fade-in and fade-out animations when navigating between routes? this is what i basically have at the moment

                        <ErrorBoundary fallback={<p>some problem</p>}>
                            <Routes>
                                <Route path="/" component={Home}/>
                                <Route path="/settings" component={Settings}/>
                            </Routes>
                        </ErrorBoundary>

                        <ErrorBoundary fallback={<p>some problem</p>}>
                            <Routes>
                                <Route path="/" component={Home}/>
                                <Route path="/settings" component={Settings}/>
                            </Routes>
                        </ErrorBoundary>

3 Replies

Unknown User•2y ago

Message Not Public

Revxrsal•2y ago

thanks for that, though i don't really want spinners. pages are mostly static content so i just want a fade-in animation that looks nice i ended up creating my own fade-in implementation as solid-transition-group didn't seem to work at all

import {Component, createSignal} from "solid-js";

export default function FadeIn(component: Component, props?: { duration?: number }) {
    const [opacity, setOpacity] = createSignal(0.1);
    const timer = setInterval(function () {
        if (opacity() >= 1) {
            clearInterval(timer);
        }
        setOpacity(opacity() + opacity() * 0.1)
    }, (props?.duration || 0.5) / 0.1);
    return (
        <div style={{opacity: opacity()}}>
            {component({})}
        </div>
    )
}

import {Component, createSignal} from "solid-js";

export default function FadeIn(component: Component, props?: { duration?: number }) {
    const [opacity, setOpacity] = createSignal(0.1);
    const timer = setInterval(function () {
        if (opacity() >= 1) {
            clearInterval(timer);
        }
        setOpacity(opacity() + opacity() * 0.1)
    }, (props?.duration || 0.5) / 0.1);
    return (
        <div style={{opacity: opacity()}}>
            {component({})}
        </div>
    )
}

let me know if there's anything i could probably improve

Unknown User•2y ago

Message Not Public

Gaming

Programming

add fade-in and fade-out animations when navigating routes (using solid-routes)