NgAndreas97

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

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!