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!

Oh, okay. I hope they @Cassie @GreenSock @OSUblake @akapowl @PointC will solve this. Anyway, thank you so much.

Oh, @mikel Thank you so much! I appreciate it. You saved my life. By the way, why it is not working on smaller window size, i mean in smaller devices?

Thank you, @mikel. This is an exact solution to my issue, but if you can help with this problem below. This tween should stop when reaches the last option, like in http://b14.dk/14years/. Like this animation. Thank you again!

Hello guys, I am trying to make a component like https://b14.dk/14years/ exactly, but I couldn't get the result that I want. I hope you guys can help me with this problem. I am not understanding the logic of this component. Thank you! But it is very urgent ort React, {useEffect} from "react"; import {Wrapper, Image, Container, FirstChild, SecondChild, BeImage} from "./style"; import {gsap} from 'gsap' import {ScrollTrigger} from 'gsap/ScrollTrigger'; const BeBold = () => { gsap.registerPlugin(ScrollTrigger); useEffect(() => { const beText = document.querySelector('.bla-hello'); gsap.timeline({ scrollTrigger: { trigger: beText, start: "top top", end: "bottom top", scrub: true, pin: '#first-child', } }); const sections = gsap.utils.toArray('.imageToShow'); console.log(sections) let tl = gsap.timeline(); sections.forEach((section, index) => { tl.to(section, { scale: 1.2, scrollTrigger: { trigger: section, start: 'top bottom -= 300', toggleActions: 'play none none reverse', scrub: true, } }) .to('#img500', { scrollTrigger: { trigger: beText, start: 'top 0', scrub: true, }, opacity: 1 }) return ( <div> <Wrapper> <Container className="bla-hello"> <FirstChild id={"first-child"}> <BeImage id="img101" src="https://b14.dk/14years/images/bebold/be-bold-be.svg" alt="kitty"/> </FirstChild> <SecondChild> <Image id="img100" className="imageToShow" src="https://b14.dk/14years/images/bebold/be-bold-light.svg" alt="kitty"/> <Image id="img200" className="imageToShow" src="https://b14.dk/14years/images/bebold/be-bold-book.svg" alt="kitty"/> <Image id="img300" className="imageToShow" src="https://b14.dk/14years/images/bebold/be-bold-medium.svg" alt="kitty"/> <Image id="img400" className="imageToShow" src="https://b14.dk/14years/images/bebold/be-bold-demi.svg" alt="kitty"/> <Image id="img500" className="imageToShow" src="https://b14.dk/14years/images/bebold/be-bold-bold.svg" alt="kitty"/> </SecondChild> </Container> </Wrapper> </div> ) } export default BeBold; This code is written in react.

Hey guys! How can I change my background color while scrolling in ScrollTrigger in a particular coordinate of my website. I would be so glad, if any of you could help me. Thank you!