Jump to content
Search Community

ScrollTrigger Timeline animation starts earlier than it is expected

Xurshed test
Moderator Tag

Recommended Posts

Hey, guys! My ScrollTrigger animation starts earlier and before its position. Plus, it appears over the previous component. I don't know what am i doing wrong. I appreciate if you can solve my problem. Please help with this, this is soo urgent!

    gsap.registerPlugin(ScrollTrigger)
    useEffect(() => {
        let tl = gsap.timeline({
            scrollTrigger: {
                trigger: '#wrapper-letters',
                scrub: true,
                pin: true,
                start: 'top center',
                end: "+=" + (window.innerHeight * 3),
                markers: true,
            }
        })
        tl.to('#letter-c', 1.5, {
            opacity: 1,
            y: -100
        })
            .to('#letter-r', 1.5, {
                opacity: 1,
                y: -100
            })
            .to('#letter-e', 1.5, {
                opacity: 1,
                y: -100
            })
            .to('#letter-a', 1.5, {
                opacity: 1,
                y: -100
            })
            .to('#letter-t', 1.5, {
                opacity: 1,
                y: -100
            })
            .to('#text-container', {
                rotate: -90,
                duration: 3,
            })
            .to('#letter-new', {
                opacity: 1,
                x: -50,
                duration: 1.5
            })

            .to('#letter-c', {
                y: -400,
                duration: 1.5,
            })
            .to('#letter-r', {
                y: -400,
                duration: 1.5,
            })
            .to('#letter-e', {
                y: -400,
                duration: 1.5,
            })
            .to('#letter-new', {
                x: -350,
                duration: 1.5,
            })
            .to('#letter-a', {
                y: -400,
                duration: 1.5,
            })
            .to('#letter-t', {
                y: -400,
                duration: 1.5,
            })
            .to('#word-container', {
                rotate: 90,
                duration: 1.5,
                x: 0,
                y: 0,
                z: 0,
            })
            .to('#all-container', {
                color: '#000'
            })
            .to('#letter-p', {
                opacity: 1,
                y: -100,
                duration: 1.5

            })
            .to('#letter-second-a', {
                opacity: 1,
                y: -100,
                duration: 1.5

            })
            .to('#letter-second-t', {
                opacity: 1,
                y: -100,
                duration: 1.5

            })
            .to('#letter-h', {
                opacity: 1,
                y: -100,
                duration: 1.5
            })
            .to('#letter-s', {
                opacity: 1,
                y: -100,
                duration: 1.5
            })
            .to('#all-container', {
                opacity: 0,
                duration: 2
            })
    }, [ScrollTrigger])

 

Link to comment
Share on other sites

Yes, like @OSUblake said, a minimal demo is absolutely essential for troubleshooting things like this. 

 

If something is starting before you'd expect, the two most common reasons are: 

  1. Something shifted around the layout AFTER the page initially loaded. For example, maybe the trigger element is 200px from the top of the screen when ScrollTrigger did all of its start/end calculations and then later you lazy-loaded some images above that trigger element which then shoves it down 600px more but you forgot to call ScrollTrigger.refresh() after that...ScrollTrigger is still going to think the trigger point is at 200px. Solution: make sure you call ScrollTrigger.refresh() after you're done shifting things around in the DOM -OR- make sure you give everything heights/widths in the CSS so that when they load, nothing shifts around. 
  2. You set something up incorrectly with your trigger/start. 

It's impossible to say without seeing the issue in context. And please do not post your whole project. Isolate things into the most minimal demo possible and we'd be happy to take a peek. 

  • Like 2
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...