Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
NgAndreas97

ScrollTrigger, Start & End position

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

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?

Link to comment
Share on other sites

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.

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

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.

 

  • Like 1
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.
×