How to create a page transition with three.meshline

[noahtrotman]

Hi, I am trying to create a page transition inspired by the Zen.ly page transitions and the Confetti sandbox.

Essentially just one line in 3d space with a growing width to the cover the viewport and starts from outside the fov. Once the line covers the screen it will then just be the background of the next page and loading text on that. Been using wouter for routes.

I’m looking for any advice or direction. I've currently been struggling/messing around with three.meshline for the past few days but have yet to make progress. As it is a dashed line and a solid line doesn't move I'm not sure if this is the right approach.

https://zen.ly/
https://codesandbox.io/s/confetti-vl221

Thanks in advance

[mwmwmw]

Try creating an animation with something like React Spring and then using drei's scroll controls to time and manipulate the animation. https://github.com/pmndrs/drei#scrollcontrols

This example doesn't do exactly what you want, but it does have animations/reveals that play when certain scroll thresholds are crossed.
https://4m0d0.csb.app/

[noahtrotman]

Thank you! Yeah, currently working with react spring to achieve the affect. I will look into the scroll controls as well.