[Elements return to their start position when they should stay]

Hi, this is my first time using gsap and im following a tutorial but im having a problem that doesn't occur in there.

 

When I refresh my page my timeline starts and I can see the animation correctly however once the animation is finished it goes back off screen to the starting position when I just want it to stay on the page. Im using .from here is my code

 

const timeline_project = gsap.timeline();
    let text1 = useRef(null)
    let itemsProject = useRef(null)
    useEffect(() => {
        timeline_project.from(text1, {
            duration: 1,
            skewY: 10,
            y: 500,
            delay: 2,
            stagger: {
                amount: .4
            },
            opacity: 0
        }, "-=1.5");
        timeline_project.from(itemsProject, {
        duration: .5,
        opacity: 0,
        y: 100
    });
    })