Change pinning element active UI by scroll (scrollmagic , gsap , reactJS , javascript)

[CodeABeautifulWorld]

Hello everyone,

I need your help to code this scroll logic : change one pinning element allowed active state by scroll.

When I scroll, state changes and updates image in both sides allowed.

By details, when I scroll down, the element below will be active and drag to change the corresponding image to the right, otherwise when scrolling up, the upper element will be active and drag to change the image, when clicked on any element on the left, the image will also be changed according to the active element (similar to scroll), and if the first element is active, we will be able to scroll to the top of this section.

 

This is sample link : Ngân hàng di động MyVIB 2.0| VIB

I want to use scrollmagic or maybe gsap or intersection observer, thank you.

 

[GSAP Helper]

Howdy! I don't have a lot of time right now to dig into everything here, but I wanted to offer you some quick advice about how to get the most out of these forums...

 

Keep it simple. Don't list a bunch of requirements ("it should animate over each section, and gradient colors over those children, force animation on hero load and then have ScrollTrigger take over dynamically...and I think my code is a mess so please help clean it up" - that's too hard to follow). Just pick the very first thing and see if you can make that work. If you get stuck, post one question focused on that one piece, like "how can I pin each section one at a time?" Keep your CodePen focused only on that one piece with as little code/markup as possible. Then once that's answered, move on to your next question/problem. 

 

Baby steps 😉

 

Before you know it, things will fall into place one at a time.

 

Again, try not to list out all the problems. Break them apart. You'll get a lot more people willing to help you if you keep things simple and clear. A well-crafted minimal demo is GOLD around here - you'll get people falling over themselves to help you if you make a CodePen that's super clear and isolates the issue. Explain exactly how to reproduce the problem, like "scroll down to the blue section and notice how it pins before it hits the top of the viewport" for example.

 

Don't worry - this community has got your back when it comes to GSAP-specific questions. I just wanted to provide some pointers on how to help us help you. 

[CodeABeautifulWorld]

Sorry about that, I will learn for next time. If anyone has a specific direction or a similar example link to implement this logic, please let me know, thanks for your help 😀.

[Cassie]

I would suggest first not using scrollMagic - we have a scroll plugin that works a lot better with GSAP.

There are a lot of demos to learn from here - ScrollTrigger demos

If you're using react we have some articles and advice over here

 

Hopefully that sets you off in the right direction!

[CodeABeautifulWorld]

@Cassie btw thanks for your advice