Hi! Just looking for a solution for a timeline I was working on in React I found out I was having this same problem. While ctx.revert() works fine, ctx.kill() doesn't. I don't know why to be honest.
const headerRef = useRef<HTMLElement>(null)
const headerCtRef = useRef<HTMLDivElement>(null)
const timeline = useRef<GSAPTimeline>(
gsap.timeline({
defaults: {
ease: 'back.out',
},
})
)
useLayoutEffect(() => {
const tl = timeline.current
const header = headerRef.current
const headerCt = headerCtRef.current
const ctx = gsap.context(() => {
tl.from(
header,
{
yPercent: -100,
duration: 0.5,
},
0
)
.from(
headerCt,
{
rotateX: 35,
delay: 0.1,
duration: 0.5,
},
0
)
.from(
[headerCt, header],
{
autoAlpha: 0,
duration: 0.2,
},
0
)
ScrollTrigger.create({
start: 'top top',
end: 99999,
onUpdate: (self) => {
self.direction === -1 ? tl.play() : tl.reverse()
},
})
}, headerRef)
return () => {
ctx?.revert()
}
}, [])
If I would use ctx.kill() the timeline bounces in and back no matter what I do, I suspect because of react strict mode second call.