Avoiding in-between opacity transition when scrolling to next section

[Frances Coronel]

Hi there, I posted the same pen earlier but now I have a different question.

I am wondering if there's a way to avoid the in-between transition you see in this CodePen (see screenshot) where the previous element is shown at a lower opacity before transitioning to next one.

 

I know there's something I probably need to update with autoAlpha attribute but I'm wondering what that would be. 

 

I know autoAlpha will animate opacity from 1 to 0 then set the visibility property to hidden. I tried removing it but then all the elements showed up so I think I went about it the wrong way.

 

In other words, if I just wanted an immediate transition without any fade to avoid the in-between transition for opacity, how could I go about configuring that?

 

 

See the Pen jOMrBzP by fvcproductions (@fvcproductions) on CodePen

[PointC]

Couldn't you remove line 45?

tl.to(elem.querySelector("img"), { autoAlpha: 0 }, i + 0.75);

Then the new image would just fade in over the top of the old one. Or am I misunderstanding the desired outcome?

 

[akapowl]

Hey @Frances Coronel

 

I also don't think I really 100% understand, what it is you are asking for, but by changing the duration and/or position parameter of the tweens in the timeline, you can achieve different sort of effects

 

See the Pen 4b9659098479bfbc1aa3320ad792cca2 by akapowl (@akapowl) on CodePen

 

 

 or even none, if you wish.

 

See the Pen e64a2e927e7df41a35a1ed966c509dd8 by akapowl (@akapowl) on CodePen

[Frances Coronel]

Yes, I was looking to eliminate the fade in transition more and changing the duration was the right way forward. Thank you very much!