Really like the idea because I don't need to install any other dependencies.
Also the logic of the intro/outro animation can be clear thanks to GSAP.
I tried to do some page transitions with Next.js and three.js using this technique.
What I want to achieve is to combine both html and threejs element in intro/outro animations.
Demo
After I finished the demo, I wrap the context into a tiny package for my own reuse.
@chundev/gtranz
I remove the setTimeline, background, setBackground in the context because I didn't use them at all and that also make sure context does not trigger re-render because of state change. The context itself is very simple you can just grab the code from src folder if you need it.
I want to share the biggest problem I encountered.
As I wrote in the Github readme, if I tweened something that is already be set in the outro.
(I need instant scroll animation of the images which are also the outro elements)
That will break the transition later because as I researched, one element can only have one tween at a time.
(I could barely find information about this topic and struggled for a while)
So I set the default to overwrite:true (default is false, in the original post, it only do the simplest css intro/outro so no problems) and arrange the order of animation setup by myself.
What I did was:
1. use a state to determine the setup order of intro/outro. (if you overwrite some tweens that are used in the outro.)
2. use custom event to re-setup outro whenever you want (mostly after the animation that tweened the same element, with onComplete callback)
I don't really know if it's good practice or not.
But I did solve my problem and make nice transition by doing so.
Just want to share my experience.
I really love this community and learn so much things here. Thank you!
