[Text color change based on different sections' background color]

Thanks, @Cassie

 

[Text color change based on different sections' background color]

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!

 

[Text Animation and Image Scale]

Thank you, @Cassie. I appreciate it

 

[Text Animation and Image Scale]

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
 

 

 

[ScrollTrigger Timeline animation starts earlier than it is expected]

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.

[ScrollTrigger Timeline animation starts earlier than it is expected]

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

 

[ScrollTrigger Timeline animation starts earlier than it is expected]

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.

 

See the Pen wvdjOKr by Xurshed17 (@Xurshed17) on CodePen

[ScrollTrigger Timeline animation starts earlier than it is expected]

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

[ScrollTrigger Timeline animation starts earlier than it is expected]

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

 

[Hover Image, Cursor showing the other image]

Thank you @akapowl

This is the exact solution that i want to get.

 

[Hover Image, Cursor showing the other image]

Thanks, @Cassie,

 but I want exact animation in https://circle.sx/#footer.

I need a logic for this animation

[Hover Image, Cursor showing the other image]

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!

 

[Element animation and pinning based on other element]

Thanks, @mikel

[Element animation and pinning based on other element]

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

 

 

[Element animation and pinning based on other element]

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!

[Element animation and pinning based on other element]

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

[Element animation and pinning based on other element]

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?

 

[Element animation and pinning based on other element]

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!

 

[Element animation and pinning based on other element]

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.

[Change the background color while scrolling in ScrollTrigger]

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!