Jump to content
Search Community

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

ElDedo test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

@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.

 

 

Link to comment
Share on other sites

  • Solution

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.

:) 

  • Like 3
Link to comment
Share on other sites

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!!!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...