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

It is working! Thank you!

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

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!

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

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

[What is the best way to create an effect of a section where the image on the left stay fixed and change, and the text on the right scrolls?]

Hi,

 

On 9/7/2020 at 3:22 PM, ZachSaucier said:

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

How can I disable the animation from first section?

 

On 9/7/2020 at 3:22 PM, ZachSaucier said:

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!