Sticky Div on left column - Images changing on scroll in right Column

[ElDedo 1 Likes (Newbie)]

Hey!

 

I want to create a section which has two Div's. 

In the left Div I got a Heading and a Paragraph, in the right Div I got a few Images and Text.

 

I want to have the left Div sticky and change the right Div a few times on Scroll (just a Fade or sth.). When all the right Div's were schown I want the user go ahead further down the page (normal scrolling).

 

So Text on the left gets sticky, div on the right fades in and out on scroll.

 

How can I achieve this?

 

*** Sorry i´m pretty new to GSAP***

 

 

***Edit***

 

I got this now, but by adding a third div on the right side this technique is not working anymore... How can I solve this?

 

See the Pen LYQMBxJ by webkonditorei (@webkonditorei) on CodePen

[SteveS 177 Likes (Specialist)]

I don't understand the issue you are describing when you add an element on the right. If you want it to pin like the text, then pin it the same way you pinned the text, if you want it to animate in and out like the image, you include it in that section and tween the opacity based on scroll.

It would help if you cleanup up your codepen and better described your issue.

[ElDedo 1 Likes (Newbie)]

@SteveS That’s what I did.

 

i added a third div within the „Laptop“ Div, but the one I’ve added just gets faded in, but the second doesn’t get faded out.

 

So the pen I’ve got now is more or less what I need, but I need to be able to add as many divs in the „Laptop“ div as I need and all elements in there are getting faded in / out by scrolling while the left div („text“) is pinned.

 

 

[PointC 14,188 Likes (Superhero)]

If I understand the question correctly, I think you'd want to loop though your targets and add each to the timeline. This avoids manually adding a bunch of tweens like you have now. That way you can add as many divs as you like and it'll all still work perfectly. 

 

See the Pen 5f9381468bbc6444d1ea73ff780a291a by PointC (@PointC) on CodePen

 

Hopefully that helps. Happy tweening.

 

[ElDedo 1 Likes (Newbie)]

17 hours ago, PointC said:

If I understand the question correctly, I think you'd want to loop though your targets and add each to the timeline. This avoids manually adding a bunch of tweens like you have now. That way you can add as many divs as you like and it'll all still work perfectly. 

 

 

 

 

Hopefully that helps. Happy tweening.

 

Thanks, that´s it!!!