Jump to content
Search Community

ScrollTrigger, Start & End position

NgAndreas97 test
Moderator Tag

Recommended Posts

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..

Before.png

 

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. 

After.png

 

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!

Link to comment
Share on other sites

  • 8 months later...

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?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...