Hey! I'm new to the GreenSock community, and super excited to try out all the cool features!
I'm adding my question to this thread because I think it's relevant. Please let me know if this belongs in a new post.
Similar to @flowen, I'm trying to animate multiple timelines (introTimeline, occupationTimeline) by nesting them into the master timeline (masterTimeline). However, the resulting page doesn't trigger the animation, instead rendering the default HTML.
export default function Home() {
// Ref for GSAP animations
const hiText = useRef();
const iAmAText = useRef();
const cursor = useRef();
const occupation = useRef();
const masterTimeline = useRef(gsap.timeline({ paused: true }));
const introTimeline = useRef(gsap.timeline({ paused: true }));
const occupationTimeline = useRef(gsap.timeline({ paused: true }));
introTimeline.current
.from(hiText.current, {
y: "+=10",
opacity: 0,
duration: 1.5,
ease: "power4.easeInOut",
})
.from(iAmAText.current, {
y: "+=10",
opacity: 0,
duration: 1.5,
ease: "power4.easeInOut",
})
.to(cursor.current, {
opacity: 0,
ease: "power0",
repeat: -1,
yoyo: true,
repeatDelay: 0.5,
});
occupationTimeline.current
.add(typeOccupation(occupation.current, "a CS Major", 1))
.add(typeOccupation(occupation.current, "a Software Developer", 1))
.add(typeOccupation(occupation.current, "a NLP Researcher", 1))
.add(typeOccupation(occupation.current, "a Computer Science Tutor", 1))
.repeat();
masterTimeline
.current.add(introTimeline.current.paused(false))
.add(occupationTimeline.current.paused(false));
// Wait until DOM has been rendered
useLayoutEffect(() => {
masterTimeline.current.paused(false);
}, []);
return (
<div className="home" id="home">
<div className="landingText">
<h1 ref={hiText}>Hi, I'm Seunggun</h1>
<div ref={iAmAText} id="wrapper">
<span>I am </span>
<span ref={occupation}></span>
<span ref={cursor}>|</span>
</div>
</div>
</div>
);
}
I tried creating my timeline with (paused: true), as @Rodrigo suggested, but that doesn't seem to be the only problem. Am I creating / adding my timelines in the wrong place? Any help would be appreciated. Thanks!
