ok now add a scrolltrigger gsap scroll. with a scroll line animations and stuff. ALWAYS make new files for new functions. so everything is easily manageable.

somethingf like this:

let svg = document.query Selector("svg")

let path = svg.queryselector ("path")

const path Length = path.getTotalLength()

console.log(pathLength);

gsap.set(path, { strokeDasharray: pathLength});

gsap.fromTo( path , { strokeDashoffset: pathLeength, }, { strokeDashoffset: 0, duration: 10, ease: "none" scrollTrigger:{ trigger:".svg-container" start:"top top", end: "bottom bottom", scrub: 1,

})

let's remove the bg and use this dark night mode toggle:

📝 Notes The hook is only available in the browser environment. So if you use NextJS App router or any other framework that uses Server Components, you should use this hook in a Client Component by adding the directive use client Currently works only if the project is using TailwindCSS Ensure your project has the necessary TailwindCSS configuration for dark mode 🚀 Features Toggles dark mode with an animation effect. Smooth animations for theme switching. Uses React Hooks for state management. Supports TypeScript for enhanced development experience. Uses localStorage to persist the dark mode state across sessions. Provides a React ref that can be attached to any component to trigger the mode change. 📦 Installation Install the package using npm or YARN:

npm install react-theme-switch-animation or

yarn add react-theme-switch-animation 📚 Usage Here’s how to use the useModeAnimation hook in your React component:

'use client'

import React from 'react' import { useModeAnimation } from 'react-theme-switch-animation'

const MyComponent = () => { const { ref, toggleSwitchTheme, isDarkMode } = useModeAnimation()

return ( <button ref={ref} onClick={toggleSwitchTheme}> Toggle Dark Mode (Currently {isDarkMode ? 'Dark' : 'Light'} Mode) </button> ) }

export default MyComponent 📚 API useModeAnimation accepts an optional props object with the following properties:

Property Type Default Description duration number 750 Duration of the animation in milliseconds. easing string "ease-in-out" CSS easing type for the animation. pseudoElement string "::view-transition-new(root)" Pseudo-element used for the animation. globalClassName string "dark" Class name to apply to the root element. animationType ThemeAnimationType ThemeAnimationType.CIRCLE Type of animation effect (CIRCLE or BLUR_CIRCLE) blurAmount number 2 Blur intensity for blur circle animation. styleId string "theme-switch-style" ID for the style element (blur circle animation). isDarkMode boolean false Initial dark mode state. onDarkModeChange (isDark: boolean) => void undefined Callback function to handle dark mode change. Animation Types The hook supports two types of animations:

ThemeAnimationType.CIRCLE: A clean circle expansion animation (default) ThemeAnimationType.BLUR_CIRCLE: A circle expansion with blur effect on the edges Example usage with blur circle animation:

'use client'

import React from 'react' import { ThemeAnimationType, useModeAnimation } from 'react-theme-switch-animation'

const MyComponent = () => { const { ref, toggleSwitchTheme, isDarkMode } = useModeAnimation({ animationType: ThemeAnimationType.BLUR_CIRCLE, blurAmount: 4, // Optional: adjust blur intensity duration: 1000, // Optional: adjust animation duration })

return ( <button ref={ref} onClick={toggleSwitchTheme}> Toggle Dark Mode (Currently {isDarkMode ? 'Dark' : 'Light'} Mode) </button> ) }

export default MyComponent Returns an object containing:

ref: React ref for attaching to the component that will trigger the dark mode toggle. toggleSwitchTheme: Function to toggle dark mode. isDarkMode: Current state of dark mode (true for dark, false for light). 📝 Requirements React 16.8 or later (for Hooks support). TypeScript for compiling the package during installation. 🤝 Contributing Contributions are welcome! Please open an issue or submit a pull request with your suggested changes.

📜 License MIT