При скролле страницы между блоками появляется линия, как её убрать?

Question

Столкнулся с проблемой при прокрутки страницы появляется линия между блоками(пример на экране). Много искал в гугле способов как избавиться от неё, ничего дельного не нашёл. Кто-нибудь знает как её убрать?

gsap.registerPlugin(ScrollTrigger);

let sections = gsap.utils.toArray(".step_1");

gsap.to(sections, {
  xPercent: -100 * (sections.length - 1),
  ease: "none",
  scrollTrigger: {
    trigger: ".wrapper",
    pin: true,
    scrub: 1,
    snap: 1 / (sections.length - 1),
    // base vertical scrolling on how wide the container is so it feels more natural.
    end: () => "+=" + document.querySelector(".wrapper").offsetWidth
  }
});

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {

}

body {
    height: 100%;
     
}

.wrapper {
    display: flex;
    flex-direction: row;
    min-height: 100vh;


}

.step_1 {
    display: flex;
    min-height: 100vh;
    min-width: 101vw;
    background: #2C2C34;
    width: 100vw;

}
.item {
    display: flex;
    width: 100%;
    margin: auto;
    justify-self: center;
    justify-content: center;

}

.second_step_1 {
    display: block;
}

.round {
    width: 120px;
    height: 120px;
    border-radius: 100%;
    background: #F2F2F2;
}

.round_text {
    display: flex;
    margin-left: 144px;
    margin-top: -50.88px;
}

.round_text span {
    width: 180px;
    height: 32px;
    font-family: 'Golos';
    font-style: normal;
    font-weight: 500;
    font-size: 26.5143px;
    line-height: 32px;
    text-align: center;
    color: #2C2C34;
    margin-left: 13.08px;
    margin-top: 3.31px;
}

.small_round {
    width: 38.11px;
    height: 38.11px;
    background: #2C2C34;
    font-family: 'Golos';
    border: none;
    font-style: normal;
    border-radius: 100%;
    font-weight: 500;
    font-size: 20.9323px;
    line-height: 25px;
    text-align: center;
    color: #FFFFFF;
}

.round img{
    margin-top: 16px;
    margin-left: 48px;
}

.second_step_1 {
    margin-top: 93px;
    margin-left: 137px;
}

.round_title {
    width: 472px;
    height: 252px;
    font-family: 'Golos';
    font-style: normal;
    font-weight: 600;
    font-size: 70px;
    line-height: 84px;
    color: #FFFFFF;
}

.round_descr {
    margin-top: 27px;
    width: 496px;
    height: 62px;
    font-family: 'Golos';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 170.5%;
    color: #FFFFFF;
}

.step_3 {
    background: #0c0cdd;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/main.css">
    <title>Test</title>
</head>

<body>
    
    <div class="wrapper">
        <div class="step_1">
            <div class="item">
                <div class="round">
                    <img src="/images/Lamp.png" alt="Lamp">
                    <div class="round_text">
                        <button class="small_round">1</button>
                        <span>Идея проекта</span>
                    </div>
                </div>
                <div class="second_step_1">
                    <div class="round_title">от идеи до реализации 6 шагов</div>
                    <div class="round_descr">Погружаемся в бизнес-процесс, обсуждаем и разрабатываем концепцию проекта</div>
                </div> 
            </div>
        </div>

        <div class="step_1 step_2">
            <div class="item">
                <div class="round">
                    <img src="/images/Lamp.png" alt="Lamp">
                    <div class="round_text">
                        <button class="small_round">1</button>
                        <span>Идея проекта</span>
                    </div>
                </div>
                <div class="second_step_1">
                    <div class="round_title">от идеи до реализации 6 шагов</div>
                    <div class="round_descr">Погружаемся в бизнес-процесс, обсуждаем и разрабатываем концепцию проекта</div>
                </div>
            </div>
        </div>

        <div class="step_1 step_2">
            <div class="item">
                <div class="round">
                    <img src="/images/Lamp.png" alt="Lamp">
                    <div class="round_text">
                        <button class="small_round">1</button>
                        <span>Идея проекта</span>
                    </div>
                </div>
                <div class="second_step_1">
                    <div class="round_title">от идеи до реализации 6 шагов</div>
                    <div class="round_descr">Погружаемся в бизнес-процесс, обсуждаем и разрабатываем концепцию проекта</div>
                </div>
            </div>
        </div>

        <div class="step_1 step_2">
            <div class="item">
                <div class="round">
                    <img src="/images/Lamp.png" alt="Lamp">
                    <div class="round_text">
                        <button class="small_round">1</button>
                        <span>Идея проекта</span>
                    </div>
                </div>
                <div class="second_step_1">
                    <div class="round_title">от идеи до реализации 6 шагов</div>
                    <div class="round_descr">Погружаемся в бизнес-процесс, обсуждаем и разрабатываем концепцию проекта</div>
                </div>
            </div>
        </div>
    </div>

    <section>
        <div class="step_2 step_3">
            <div class="item">
                <div class="round">
                    <img src="/images/Lamp.png" alt="Lamp">
                    <div class="round_text">
                        <button class="small_round">1</button>
                        <span>Идея проекта</span>
                    </div>
                </div>
                <div class="second_step_1">
                    <div class="round_title">от идеи до реализации 6 шагов</div>
                    <div class="round_descr">Погружаемся в бизнес-процесс, обсуждаем и разрабатываем концепцию проекта</div>
                </div>
            </div>
        </div>
    </section>
    

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js"></script>
    <script text="text/javascript" src="/js/app.js"></script>
</body>
</html>

БЛОГ НА HUSL

При скролле страницы между блоками появляется линия, как её убрать?

Ответы (0 шт):