I did a codepen example of the scroll animation I'm doing on a website.
Everything is working as intended: when the first div of text and image goes to opacity 0, the next one comes to opacity 1 in the same place as the last one.
But what I need to fix is that it's taking a bit more time for the next one to appear after the one before disappear, I can see that there's a bunch of padding or space between the end of one and the start of the next one and I couldn't fix it, if I change the duration the animation will go faster but there still a blank between the animations. I don't know if I need to target another thing or something like that, I hope I'm making myself clear Thank you!
Here is the link with my code: https://codepen.io/aszuster-dhnn/pen/MWQaYdm
HTML:
<section class="scroll-fixed">
<!-- ** FIRST SLIDE ** -->
<div class="container container-scroll">
<div class="etc">
<div class="scroll-slide scroll-first-slide">
<div class="scroll-middle-side-container">
<img
class="scroll-main-image"
src="https://user-images.githubusercontent.com/89801607/166937475-9bb2dae8-90cc-4a24-8684-d44b32288052.png"
alt=""
/>
</div>
<div class="scroll-left-side-container">
<div class="scroll-subtitle">
<span>Subtitle 1</span>
</div>
<div class="scroll-title">
<h2>TITLE 1</h2>
</div>
<div class="scroll-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt
</p>
</div>
</div>
</div>
</div>
<!-- ** SECOND SLIDE ** -->
<div class="etc">
<div class="scroll-slide scroll-second-slide">
<div class="scroll-middle-side-container">
<img
class="scroll-main-image"
src="https://user-images.githubusercontent.com/89801607/166937298-2af518cb-7634-48a3-9abd-caa8c0533a7d.png"
alt=""
/>
</div>
<div class="scroll-left-side-container">
<div class="scroll-subtitle">
<span>Subtitle 2</span>
</div>
<div class="scroll-title">
<h2>TITLE 2</h2>
</div>
<div class="scroll-text">
<p>ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
</div>
</div>
</div>
<!-- ** THIRD SLIDE ** -->
<div class="etc">
<div class="scroll-slide scroll-third-slide">
<div class="scroll-middle-side-container">
<img
class="scroll-main-image"
src="https://user-images.githubusercontent.com/89801607/166937603-a8a6f71e-37f9-4ae6-877d-7141040ae3d4.png"
alt=""
/>
</div>
<div class="scroll-left-side-container">
<div class="scroll-subtitle">
<span>Subtitle 3</span>
</div>
<div class="scroll-title">
<h2>TITLE 3</h2>
</div>
<div class="scroll-text">
<p>
quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat.
</p>
</div>
</div>
</div>
</div>
<!-- ** FORTH SLIDE ** -->
<div class="etc">
<div class="scroll-slide scroll-forth-slide">
<div class="scroll-middle-side-container">
<img
class="scroll-main-image"
src="https://user-images.githubusercontent.com/89801607/166937755-eb7d261d-2075-4840-b32e-ffd17f546195.png"
alt=""
/>
</div>
<div class="scroll-left-side-container">
<div class="scroll-subtitle">
<span>Subtitle 4</span>
</div>
<div class="scroll-title">
<h2>TITLE 4</h2>
</div>
<div class="scroll-text">
<p>Duis aute irure dolor in reprehenderit in voluptate</p>
</div>
</div>
</div>
</div>
<!-- ** FIFTH SLIDE ** -->
<div class="etc">
<div class="scroll-slide scroll-fifth-slide">
<div class="scroll-middle-side-container">
<img
class="scroll-main-image"
src="https://user-images.githubusercontent.com/89801607/166937864-45e66c12-fa23-4075-99ce-584bddeca448.png"
alt=""
/>
</div>
<div class="scroll-left-side-container">
<div class="scroll-subtitle">
<span>Subtitle 5</span>
</div>
<div class="scroll-title">
<h2>TITLE 5</h2>
</div>
<div class="scroll-text">
<p>
velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</div>
</div>
</div>
</div>
<!-- ** SIXTH SLIDE ** -->
<div class="etc">
<div class="scroll-slide scroll-sixth-slide">
<div class="scroll-middle-side-container">
<img
class="scroll-main-image"
src="https://user-images.githubusercontent.com/89801607/166937939-0ba9d632-a5ba-4c6e-b9d4-89dbfe4f56de.png"
alt=""
/>
</div>
<div class="scroll-left-side-container">
<div class="scroll-subtitle">
<span>Subtitle 6</span>
</div>
<div class="scroll-title">
<h2>TITLE 6</h2>
</div>
<div class="scroll-text">
<p>Excepteur sint occaecat cupidatat non proident</p>
</div>
</div>
</div>
</div>
<div class="scroll-right-side-container">
<div class="scroll-marker"></div>
</div>
<aside>
<span class="counter">01</span>
<span class="counter">02</span>
<span class="counter">03</span>
<span class="counter">04</span>
<span class="counter">05</span>
<span class="counter">06</span>
</aside>
</div>
</section>
JS:
if (window.innerWidth > 992) {
TweenLite.defaultEase = Linear.easeNone;
var controller = new ScrollMagic.Controller();
$(".etc").each(function (i) {
var target = $(this).find(".scroll-slide");
var tl = new TimelineMax();
tl.from(target, 0.25, { opacity: 0 });
tl.to(target, 0.25, { opacity: 0 }, 0.75);
new ScrollMagic.Scene({
triggerElement: this,
triggerHook: 0,
duration: "150%",
offset: -200,
})
.setPin(this)
.setTween(tl)
.addIndicators()
.addTo(controller);
});
}