Xurshed

Thanks, @Cassie

Hello guys, it is me again. My project has different kind of background (especially black and white), so my navbar toggle should change based on different background color. I got stuck in this problem. Like this above, when black background reaches, my text color should be white, and so others. Please help me out!. Thank you!

Thank you, @Cassie. I appreciate it

Hey, guys! I found a very smooth animation in in this website. Can you guys help me out or give me an example please with this section below. Thank you

Yes, i know @Cassie. It is starting at the 'start' marker, but it is appearing above the component as i showed in the image. Something forces it to start earlier. But i dont know what is it.

In the given codepen, it is not wworking well, but nevermind. I just need to know Why animation starts early!?

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! I know it is somehow broken.

please, @Cassie, @GreenSock, @PointC, @akapowl help me

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])

Thank you @akapowl This is the exact solution that i want to get.

Thanks, @Cassie, but I want exact animation in https://circle.sx/#footer. I need a logic for this animation

Hey guys, I want to know how to do an animation like this website: https://circle.sx/#footer I need an image with MouseOver effect. Please guys, i appreaciate if you can solve. Thank you!

Thanks, @mikel

Hey @Cassie Thanks for your attention. I just only need the last part, like this. Like when animation ends, they should stop, then the color should be changed with pin. Other parts are solved. I would be happy, if u do it

Hey @GreenSock, Thank you. https://greensock.com/forums/topic/28820-element-animation-and-pinning-based-on-other-element/?do=findComment&comment=143171&_backrid=99537 Can you solve this problem too? I could not understand the logic, if you don't mind, please help with this component. thank you!