R3F WebGL Page Transition ?

[graceful wharf]

is there anyway to make a webgl transition page with three js , that when you go to another page it triggers a shader effect for like 1 sec. or so ?

something like this one :

https://adidaschile20.com/

[proven saddle]

You can catch the browser event, prevent it and apply the shader effect or wtv, and after a few secconds manually trigger it
@om3r https://stackoverflow.com/questions/821011/prevent-a-webpage-from-navigating-away-using-javascript
Stack Overflow
Prevent a webpage from navigating away using JavaScript
How to prevent a webpage from navigating away using JavaScript?

Also this is how i did it for nextjs in a project for a client:

import { useRouter, usePathname } from 'next/navigation'

const usePreventUnload = (showWarningRef, setShowWarningRef) => {
  const router = useRouter()
  const pathname = usePathname()

  useEffect(() => {
    const unloadCallback = (event) => {
      if (showWarningRef.current) {
        event.preventDefault()
        event.returnValue = ''
      }
      return ''
    }
  
    const onPopState = () => {
      if (showWarningRef.current) {
        const result = confirm('Some of your changes are not saved, do you really want to leave?') 
        if (!result) return router.push(pathname)
        setShowWarningRef(false)
      }
    }
  
    window.addEventListener('beforeunload', unloadCallback)
    window.addEventListener('popstate', onPopState)
    return () => {
      window.removeEventListener('beforeunload', unloadCallback)
      window.removeEventListener('popstate', onPopState)
    }
  }, [])
}
export default usePreventUnload```

You can just modify it to do what I told you

[graceful wharf]

thank you so much @kiter i will try to apply it , and see how it goes ♥

sorry but where can i add the shader effect inside the code ? or do you mean i create an effectcomposer and some animation inside and it will only trigger it for 1 sec. ?

<EffectComposer> <Glitch /> </EffectComposer?

[proven saddle]

The only thing the code does is a hook that prevents unload. You can use this data to conditionally display the effect in the component where its needed

Also you have to modify the Hook (its an example in nextjs) I don't know which framework you are using, i just happened to have that code laying around and send it cus it might be useful to you.

Good luck 🙂

[graceful wharf]

I am using next js aswell , its my favourite framework out there , thank you kiter i will try to implement a shader effect and see how it goes 🙂

[random ibex]

I've done this before and found react-transition-group to be very helpful.

[graceful wharf]

I checked that library but what it does , it trigger a CSS animations but it cannot trigger a shader effect in three js , for example we can use barba js to navigate to another page and trigger a specific animation on enter and on leave but in three js we can do some cool webgl animations with shader effects but the problem i am not sure where to start learning these kind of stuff, that when the user navigate to another page it trigger a shader effect like the website above

[random ibex]

You can use it (react-transition-group) to trigger whatever you want. I use it trigger shader animations and other 3D animations. It has callbacks for onEnter, onExit etc... So you can use those to do whatever you choose.

[random ibex]

I have a proof of concept using react-transition-group here...
https://next-three-skrichten.vercel.app/transpage1

YOu can just click anywhere to go back an forth between 2 routes. There are a few random shader transitions and one using a 3D object.