Whenever I scroll up or down, there is a section on my page where I have implemented scroll magic. However, as I scroll through this section, it starts to jump until it reaches the position where I want it to be with transform:translateY(0).
I am unsure how to fix this issue. Could it be related to the transition or something else?
Has anyone encountered a similar problem before?
$(document).ready(function() {
// Initializing ScrollMagic
var controller = new ScrollMagic.Controller();
// Creating a scene
var ourScene = new ScrollMagic.Scene({
triggerElement: '.section__students'
})
.setClassToggle('.section__students', 'fade-in')
.addIndicators({
name: 'fade scene',
colorTrigger: 'transparent',
indent: 200,
colorStart: 'transparent'
})
.addTo(controller);
});.students-main {
width: 100%;
height: auto;
text-align: center;
opacity: 0;
transform: translateY(-350px);
transition: all 1s ease-out;
}
.section__students.fade-in {
opacity: 1;
transform: translateY(0);
}
.carousel {
position: relative;
margin: 0 auto;
}
.carousel__button {
position: absolute;
top: 45%;
transform: translateY(-45%);
background: transparent;
border: 0;
}
.carousel__button:focus {
outline: 0;
}
.carousel__button--left {
left: 3.5rem;
z-index: 1;
}
.carousel__button--right {
right: 3.5rem;
}
.arrow-left-students {
font-size: 3rem;
}
.arrow-left-students:hover {
color: $color-primary;
}
.arrow-right-students {
font-size: 3rem;
}
.arrow-right-students:hover {
color: $color-primary;
}
.carousel__nav {
display: flex;
justify-content: center;
padding: 3rem 0;
}
.carousel__indicator {
border: 0;
border-radius: 50%;
width: 1.6rem;
height: 1.6rem;
background: $color-gray-dark-2;
margin: 0 1.2rem;
}
.carousel__indicator:focus {
outline: 0;
}
section .students-h1 {
text-align: center;
text-transform: uppercase;
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%, -140px);
}
.students-h1::after {
content: '';
width: 10rem;
height: .8rem;
background-color: $color-primary-light;
position: absolute;
bottom: -24rem;
top: 70%;
left: 50%;
transform: translate(-50%, 30px);
border-radius: 2rem;
}
.wrap-students {
display: inline-block;
justify-content: center;
align-items: center;
margin: 0 3rem;
flex-direction: column;
height: 30rem;
width: 30rem;
background-color: $color-grey-light-1;
border-radius: 3rem;
}
.wrap-students:hover {
box-shadow: -1px 3px 20px 3px $color-primary-light;
transform: translateY(-10%);
transition: all .5s;
}
.students {
padding: 2.5rem 6rem;
}
.students .students-name {
color: $color-gray-dark-2;
padding-top: 1rem;
}
.students .students-description {
margin-top: .5rem;
font-style: italic;
font-family: "lato", sans-serif;
font-size: 1.6rem;
}
.wrap-students .students .students-img {
border-radius: 50%;
width: 16rem;
height: 16rem;
object-fit: cover;
object-position: 50% 10%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
<section class="section__students students-main">
<div id="parallax__carousel" class="carousel">
<button class="carousel__button carousel__button--left">
<i class="fas fa-chevron-left arrow-left-students"></i>
</button>
<h1 class="students-h1">Students</h1>
<div class="wrap-students">
<div class="students">
<img class="students-img" src="/img/student1.jpg" alt="student-image">
<h2 class="students-name">Nick Harrison</h2>
<p class="students-description">Lorem ipsum</p>
</div>
</div>
<div class="wrap-students">
<div class="students">
<img class="students-img" src="/img/student3.jpg" alt="student-image">
<h2 class="students-name">Nick Harrison</h2>
<p class="students-description">Lorem ipsum</p>
</div>
</div>
<div class="wrap-students">
<div class="students">
<img class="students-img" src="/img/student1.jpg" alt="student-image">
<h2 class="students-name">Nick Harrison</h2>
<p class="students-description">Lorem ipsum</p>
</div>
</div>
<div class="wrap-students">
<div class="students">
<img class="students-img" src="/img/student3.jpg" alt="student-image">
<h2 class="students-name">Nick Harrison</h2>
<p class="students-description">Lorem ipsum</p>
</div>
</div>
<button class="carousel__button carousel__button--right">
<i class="fas fa-chevron-right arrow-right-students"></i>
</button>
<div class="carousel__nav">
<button class="carousel__indicator"></button>
<button class="carousel__indicator"></button>
<button class="carousel__indicator"></button>
</div>
</div>
</section>