RonceBleue

Yes, thanks a lot for the reactivity ! Akapowi it is exactly that, I named my element 'transition' which is a tailwind utility class. I feel so dumb for not seeing it.

Hello, I encounter an issue with easings. Basically the problem is that animation speed up at the end of a tween, even when I stipulate ease:none in a tween. I can't reproduce on a codepen, I am working on a nextJs project. Here is the component that is animated export default function Template({ children }: { children: React.ReactNode }) { const transition = useRef(null); useGSAP(() => { transitionEnter(); }, []); return ( <div className='relative h-screen w-full overflow-hidden'> <div ref={transition} id='transition-wrapper' className='absolute left-0 top-0 h-full w-full bg-black transition' ></div> {children} </div> ); } And here is my animations export const transitionEnter = () => { const el = document.querySelector('#transition-wrapper'); const tl = gsap.timeline({ onStart: () => { console.log('transition start'); }, onComplete: () => { console.log('transition end'); }, }); tl.to(el, { y: window.innerHeight, ease: 'none', duration: 1, }); }; export const transitionLeave = (router: AppRouterInstance, route: string) => { const el = document.querySelector('#transition-wrapper'); const tl = gsap.timeline({ onStart: () => { console.log('enter start'); }, onComplete: () => { console.log('enter end'); router.push(route); }, }); tl.to(el, { y: 0, duration: 1, ease: 'none', }); }; And the result here, we can clearly see that the animation speed is not linear. And it is even worst when I use other easing function. gsap.webm I think there may be something to do with useGsap/Next but I run out of idea. If someone have some ideas. Thanks.