[ScrollTrigger, Start & End position]

Hey GSAP!

 

I was not able to recreate the bug using codepen unfortunately

But if you have the time I would much appreciate you checking out the main code :

https://github.com/AndreasNg97/portofolio/blob/master/src/components/section5-MyProjects/ProjectCard.js

 

 

[ScrollTrigger, Start & End position]

I've encountered a problem with my start & end position on my ScrollTrigger.

 

This is how the start and end position should be, and every time I save after writing a code the position is correct. However..

 

When I refresh the page the start & end position gets buggy. The start & end position does not align with the top and the bottom of the container to the left. 

 

This is the scrollTrigger code

    useEffect(() => {
        const el = cardRef.current
        ScrollTrigger.create({
            trigger : el,
            start : 'top center ',
            end: 'bottom center',
            onEnter : () => {
                playVideo()
                store.dispatch(currentElementHover(techNames()))
                cardRef.current.classList.toggle('cardFocus') 
            },
            onEnterBack : () => {
                playVideo()
                store.dispatch(currentElementHover(techNames()))
                cardRef.current.classList.toggle('cardFocus') 
            },
            onLeave : () => {
                resetVideo()
                store.dispatch(currentElementHover([]))
                cardRef.current.classList.toggle('cardFocus') 
            },
            onLeaveBack : () => {
                resetVideo()
                store.dispatch(currentElementHover([]))
                cardRef.current.classList.toggle('cardFocus') 
            },
            markers : true
        })
    },[])

Any help would be appreciated greatly!