ScrollTrigger, Start & End position

[NgAndreas97 0 Likes (Newbie)]

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!

[ZachSaucier 7,152 Likes (Superhero)]

Hey NgAndreas97 and welcome to the GreenSock forums.

 

Can you please create a minimal demo of the issue using something like CodePen or CodeSandbox if you'd like our help debugging?

[NgAndreas97 0 Likes (Newbie)]

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

 

 

[ZachSaucier 7,152 Likes (Superhero)]

Sorry, but we don't have the capacity to debug entire projects of everyone who posts in these forums for free. Please try your best to create a minimal demo of the issue for us to check out. Besides that, if you have a specific question related to GSAP let us know and we'll do our best to help.

[Muhammad Arif 0 Likes (Newbie)]

Same Pro

On 2/11/2021 at 9:42 AM, ZachSaucier said:

Sorry, but we don't have the capacity to debug entire projects of everyone who posts in these forums for free. Please try your best to create a minimal demo of the issue for us to check out. Besides that, if you have a specific question related to GSAP let us know and we'll do our best to help.

Same Problem with  my code also. Can you please solve this?

[Cassie 5,397 Likes (Superhero)]

Hi @Muhammad Arif,

 

We can help more effectively if you provide a minimal demo, codepen is great for this.

Can you put a reduced example together and start a new thread?

- thanks.