Xurshed Posted July 30, 2021 Share Posted July 30, 2021 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 More sharing options...
Xurshed Posted July 30, 2021 Author Share Posted July 30, 2021 please, @Cassie, @GreenSock, @PointC, @akapowl help me Link to comment Share on other sites More sharing options...
OSUblake Posted July 30, 2021 Share Posted July 30, 2021 Please don't @ people for help. Posting a huge block of code is not helpful. If you have a GSAP-specific question, please provide a minimal demo. We don't want to see your entire project. Just the issue. 4 Link to comment Share on other sites More sharing options...
GreenSock Posted July 30, 2021 Share Posted July 30, 2021 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: 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. 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. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now