Section where the image on the left stay fixed and change, and the text on the right scrolls

[rszab]

I would like to create a similar effect like this: https://withjoy.com/wedding-website/#All_Little_Details_Static or https://stuart.com/delivery-express-courier/ or https://swoopin.webflow.io/.

I found the CodePen URL here and solutions, but there are issues I am wrestling with.

I’m trying to reproduce, but not perfect because:

 

- I try to get the first image showing before the scroll

 

.left-content > *:not(:first-child) {
  opacity: 0;
  visibility: hidden;
}

Quote

Optionally also change the getCurrentSection to not do any animation when the first section is entered from the top.

• The CSS is ok but, how can I disable the animation from first section?

 

- the images must change when the text on the right enter the screen, instead of when it's in the middle

Quote

You'll need to change the position detection in the getCurrentSection function then. Currently it's currScroll > marker.offsetTop - you'll need to add some to the left side or subtract from the right side. 

• I tried, but not working well. Could you help me, please?

 

Thanks!

See the Pen JjXMwyp?editors=1010 by daviddemri (@daviddemri) on CodePen

[Cassie]

Hi there - We don't really have the capacity here to help people tweak codepens until they're perfect - but we're more than happy to answer questions about GSAP

Is there a GSAP specific thing you're struggling with? Is there a part of the code you're struggling to understand?

Also - Have you taken a look at our ScrollTrigger docs and the video?
 

Introducing ScrollTrigger for GSAP from GreenSock on Vimeo.

[rszab]

Hi,

 

I fixed everything except one thing.

 

I try to get the first image showing before the scroll without animation.

Quote

Optionally also change the getCurrentSection to not do any animation when the first section is entered from the top.

Can I remove animation when the first section is entered from the top?

 

I fixed one thing with CSS so it's not hidden now, but I can't disable the animation from the top.

.left-content > *:not(:first-child) {
  opacity: 0;
  visibility: hidden;
}

 

Thanks!

[GreenSock]

I think you're doing a lot of extra work there. For example, it seems like you're using an onUpdate to constantly be checking the offsetTop (expensive!) and then fire each section's animation at a certain spot instead of just using a simple ScrollTrigger for each one. No need to constantly check that onUpdate and figure out which section you're in - that's what ScrollTrigger is made for. 

 

Here's a quick mockup of an example you can use as a jumping-off point: 

See the Pen poLqwJK?editors=0010 by GreenSock (@GreenSock) on CodePen

[rszab]

It is working! Thank you!