latteouka
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by latteouka
-
-
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.
After I finished the demo, I wrap the context into a tiny package for my own reuse.
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!
- 1
GSAP Page Transitions in Next.js
in GSAP
Posted
Hi @GreenSock,
Thanks for pointing out my misunderstanding.
It really helps me understand how the timeline and overwrite works!
After building a tiny playground, I found my problem was not about overwriting but states.
See the Pen gOBmYxz?editors=1010 by latteouka (@latteouka) on CodePen
I was trying to tween some "current" elements which need to be set again because "current index" have changed.
That is why I was trying to find some solutions about overwriting conflicts.
I also had some problems with tweening something before the last
delay
animation is not yet played.I am happy to stay with the default
overwrite: false
and more confident about tuning my page transition now.Thank you again for the help.