Element animation and pinning based on other element

[Xurshed]

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.

[mikel]

Hey @Xurshed,

 

If you mean the typo animation this is an option.

 

See the Pen mdmmGOX by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

[Xurshed]

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!

 

[mikel]

Hey,

 

One should determine the relevant distance for the 'containerRight'.
There is a catch though: After window resize, the scroll trigger for the words does not work correctly.
Unfortunately I can't find the bug, don't understand the logic.
In addition, here in the iframe and in debug mode 'y: -515' leads to a different result.

 

See the Pen poPwzae by mikeK (@mikeK) on CodePen

 

May the experts have an answer.

Mikel

[Xurshed]

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?

 

[mikel]

 

Unfortunately I have no idea what is going wrong.
Let's wait for the experts.

[Xurshed]

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

[Cassie]

Hey @Xurshed,

If @mikel's struggling to work out the logic it's definitely going to be beyond my ability on a Sunday evening.

I've bookmarked this and I'll get back to you tomorrow morning if no one's answered by then.

[GreenSock]

21 hours ago, mikel said:

There is a catch though: After window resize, the scroll trigger for the words does not work correctly.
Unfortunately I can't find the bug, don't understand the logic.

The main problem is that you're shifting around the y position of the words with a PREVIOUS ScrollTrigger, thus when it refreshes all the start/end values they're post-shift (the animation is tainting the positions). Just set the refreshPriority of that first one to a lower number (or the other ones to a higher number) so that the calculations occur in the proper order and the positions aren't tainted by the  shift: 

See the Pen vYmZepb?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Other notes:

• You don't need to add a "resize" listener that calls ScrollTrigger.refresh() because it already does that internally in a more optimized way (waiting until 200ms passes of it being still so that it doesn't bog down). 
• If you're only putting one tween into your timeline, there's no reason to create a timeline at all. It's fine, but just extra code. 
• invalidateOnRefresh is only useful when you have function-based values in your animations. In this case, it was wasteful/useless.  

Happy tweening!

[Xurshed]

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!

[mikel]

Hey @GreenSock,

 

Thank you very much. I did not realize this constellation.

 

Happy tweening ...

Mikel

[Cassie]

Hey @Xurshed - I'm afraid I don't see what you still need help with - it looks like that problem has been solved.

Could you elaborate?

[Xurshed]

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

 

 

[Cassie]

In order to 'stop' the user for a second you could exclude the last h1 from the words loop and then add that final text fade on to the end of the right column animation.

Then the right column will move up, the last h1 will fade in and then the section will unpin.

See the Pen 9b1aff7c794bfad7383d140a31be9534?editors=1111 by cassie-codes (@cassie-codes) on CodePen

[mikel]

 

... another option

 

See the Pen XWRgPBX?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy scrolling ...

Mikel

 

[mikel]

... another, better option

 

See the Pen mdmwoqV?editors=0010 by mikeK (@mikeK) on CodePen

 

Happy scrolling ...

Mikel

 

[Xurshed]

Thanks, @mikel