Image Comparision on Scroll overlaps the sections

[orca_rohit]

hi I saw an example of image comparision in gsap docs. I liked it and thought to customize it on my own way.

Though i was able to customize it in my own idea, I noticed that the elements are overlapping the sections and the animation is starting very early than it should.

Kindly help.

 

Sorry Guys it was just a css issue, but still i would like your opinions if this bit i got properly.

See the Pen zYoMJNa by orca_rohit (@orca_rohit) on CodePen

Edited March 10, 2021 by orca_rohit
Tweaked to achive the required solution

[akapowl]

 

Hey @orca_rohit

 

I'm not sure I understand, but I don't think it starts earlier than it should.

To me it looks like more of a CSS layout question.

 

Since you did not specify a height on your sections before the image-comparison but only a min-height, that is what your sections will be set to.

To me the ScrollTrigger part looks like it's doing what it is supposed to.

 

But maybe I am misunderstanding?

 

 

[orca_rohit]

8 minutes ago, akapowl said:

 

Hey @orca_rohit

 

I'm not sure I understand, but I don't think it starts earlier than it should.

To me it looks like more of a CSS layout question.

 

Since you did not specify a height on your sections before the image-comparison but only a min-height, that is what your sections will be set to.

To me the ScrollTrigger part looks like it's doing what it is supposed to.

 

But maybe I am misunderstanding?

 

 

@akapowl when I posted this I didn't checked my css file. but after a while i got that it was happening due to css. so I changed the css and marked that codepen as a solution.

 

[akapowl]

 

Oh, alright. Looks like I had the tab open in my browser for too long and simply just didn't reload before answering - so I didn't see the changes you made.

 

I'm glad, you got things figured out