ScrollTrigger change content when element is active

[GustavoSanchez]

Hi,

 

I'm very new to gsap and been trying to do this layout today but without any luck.

 

In the pen you can see 4 items to the left, what I'm trying to achieve is to pin this items in the left and change the content in the right with the relevant one. the pen js is very small is where I started and i have been trying different things but I don't know if im going in the right direction

 

I highlighted one of the items as an example of the result I'm looking for, when you scroll past certain offset the element goes to active and the content that shows is the relevant one, in this case, Ipsum would show

 

 

Thank you very much if anyone can point me in the right direction.

See the Pen BaKqPLM by Gusis93 (@Gusis93) on CodePen

[ZachSaucier]

Hey Gustavo and welcome to the GreenSock forums.

 

3 hours ago, GustavoSanchez said:

change the content in the right

What do you mean "change the content" here? How should it change?

 

I think it'd help us if you stripped out all of the HTML and CSS that's not directly related to the question that you're asking about.

[akapowl]

 

Hey @GustavoSanchez

 

I had a demo built for something similar to what I think, you want to achieve, in this thread:

 

 

 

 

 

I polished it up a bit, later on, and just now, added a new part to it.

That might resemble the part of showing the relevant content, as you referred to.

 

See the Pen 4a8ca13036ba9f2f80919f671da1fed0 by akapowl (@akapowl) on CodePen

 

 

 

Unfortunately, I don't have much time to try and see, if or how it could work with your code-base, but maybe this could serve as inspiration for you at least.

 

Cheers,

Paul

 

[GustavoSanchez]

Hi @ZachSaucier ,

 

by changing the content i mean exactly what @akapowl posted in his demo, thank you so much for it, I read it and seems exactly what Im looking for. 

 

It was kind of the direction I was taking but couldn't get there. I will try it soon and post the updated pen.

 

thanks both for the replies!

[Ayaz1111]

On 9/20/2020 at 1:37 AM, akapowl said:

 

Hey @GustavoSanchez

 

I had a demo built for something similar to what I think, you want to achieve, in this thread:

 

 

 

 

 

I polished it up a bit, later on, and just now, added a new part to it.

That might resemble the part of showing the relevant content, as you referred to.

 

 

 

 

 

 

Unfortunately, I don't have much time to try and see, if or how it could work with your code-base, but maybe this could serve as inspiration for you at least.

 

Cheers,

Paul

 

Hi, everyone i need some help with this example, how can I leave the last element active after the end of scrolling

[akapowl]

 

Welcome to the forum.

 

You'll need to adjust the logic to accomodate for that.

 

These threads contain that example above in a modified version, where the last element stays active when scrolling past the section.