gsap to follow dots when scroll down

[DhavalV]

Hello,

 

I've cloned the other Code from CodePen to my personal CodePen and changed the SCSS to CSS for my use case, and the example I was looking to integrate into my requirement is matching but a little difference is there if you see the below Screenshot, where by-default is on Point 1 Empathize, and when Scroll Down section will be fixed, but the Text Content + Image will change, and as we scroll down it'll fill the color from Point 1 Empathize to Point 2 Define, the same thing is happening in the cloned CodePen Code, but the difference is that in that Navbar content is also getting scrolled which I don't want

 

 

can anyone please help me with this?

 

 

Original Code => 

See the Pen 597a468071d4dce3f7bf0ce80d6cb8d3 by michellebarker (@michellebarker) on CodePen

See the Pen poGjjJo by dhavalveera (@dhavalveera) on CodePen

Edited October 26, 2023 by DhavalV
to provide the original codepen link

[mvaneijgen]

That is a completely different layout. I would first focus on recreating the layout (forget about GSAP and ScrollTrigger). If that is looking like you want I would focus on the animation, the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

Use the original pen as a reverence, like what classes they use, so it will be easier to copy their logic, but I would not try and modify this to your layout, it is much easier to start fresh with your own requirements. When you're done with the layout and start implementing the animations and you are stuck, post back here with what you've tried and someone here will surely point you in the right direction.

 

Keep in mind that it will require some elbow grease to get things the work like you want. Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working. Seen that you already have an example it will maybe go a bit faster, but I don't know how  comfortable you are with CSS and the GSAP tools.

 

Hope it helps and happy tweening! 

[DhavalV]

mvaneijgen Thanks for your reply.

 

I tried to check their code & try to understand, and I noticed one thing is that they're using GSAP's Draggable Plugin, but the places where they've used the Draggable code instance, it's quite confusing for me.

[mvaneijgen]

They've just made the top bar Draggable . I would figure you don't want that in your layout, so you could just leave that out. 

[DhavalV]

I didn't get you made Draggable... Furthermore in my Screenshot, when I scroll down, from Point A to Point B, it'll be changed from grey to Blue and the same for Point B to Point C, which means all three will be selected, so Draggable will be required for not?

 

Furthermore, I noticed that if I remove the `data-draggable` from the navbar code, then when I scroll down it does not update the timeline years, like from 1993 to 1995 and so on.

 

[mvaneijgen]

14 minutes ago, DhavalV said:

I didn't get you made Draggable...

?

 

14 minutes ago, DhavalV said:

Furthermore in my Screenshot, when I scroll down, from Point A to Point B, it'll be changed from grey to Blue and the same for Point B to Point C, which means all three will be selected, so Draggable will be required for not?

No? That is just an animation. You have to create an animation that selects each dot and makes it blue, then the next, ect for the amount of dots you have. You could implement it so that you can also drag it, but that is way off! You first have to create your layout with CSS before you even think about animating, not even talking about dragging things around. 

 

14 minutes ago, DhavalV said:

Furthermore, I noticed that if I remove the `data-draggable` from the navbar code, then when I scroll down it does not update the timeline years, like from 1993 to 1995 and so on.

 

That is because they use that as a selector on line 5 of the code (`const track = document.querySelector('[data-draggable]')`). I was talking about disabling the `Draggable` instance on line 39

 

See the Pen MWLaKXG?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

It is smart to create a feature list you want to have and gathering refreshes, but again you frist have to create a layout before you do anything, so that is where I would start. 

 

Check out this awesome tutorial on how to work with ScrollTrigger 

 

 

 

 

And check these getting started guides 

 

https://greensock.com/get-started/

https://greensock.com/get-started-2

 

Hope it helps and happy tweening! 

 

[Rodrigo]

Hi,

 

A Mitchel mentions the setup in the image is quite different than the codepens you linked and that you should focus on that first and then create the animations and once the animations are working as you expect, only then add ScrollTrigger to the mix:

 

Here are few examples:

See the Pen oNQNrQx by GreenSock (@GreenSock) on CodePen

 

See the Pen mdjyjYE by GreenSock (@GreenSock) on CodePen

 

See the Pen ZExovXw by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!