Jump to content
Search Community

IvanK

Members

  • Posts

    5

  • Joined

  • Last visited

 Content Type 

Posts posted by IvanK

    In the mobile version of the site, when you start scrolling up or down, an offset appears

    in GSAP

    Posted

    On 18.11.2021 at 11:39, GreenSock said:

    О, да, это нормально - это потому, что Safari буквально меняет высоту области просмотра, когда показывает / скрывает хром браузера (адресную строку). ScrollTrigger ожидает завершения прокрутки, прежде чем запускает ScrollTrigger.refresh () для повторного вычисления начальной / конечной позиции. Это не ошибка - это проблема логики. Единственный способ обойти это, о котором я знаю, - это обернуть все в <div>, что position: fixed, и использовать этот дескриптор для всей прокрутки вместо <body>, чтобы Safari не отображал / не скрывал адресную строку. Очевидно, вам также нужно изменить «прокрутку» на ScrollTriggers. 

    Could you show the solution in more detail using position: fixed

    In the mobile version of the site, when you start scrolling up or down, an offset appears

    in GSAP

    Posted 

    gsapInstance.timeline({
        scrollTrigger: {
            trigger: ".totem-animal .wrapper",
            scrub: false,
            // pin: true,
            start: "top 30%",
            end: "bottom -30%",
        }
    });
    gsapInstance.timeline({
        scrollTrigger: {
            trigger: ".totem-animal .title",
            anticipatePin: 1,
            scrub: true,
            start: "center 55%",
            end: "bottom 50%",
        }
    }).to(".totem-animal .title .step1", {opacity: 1, top: 0, duration: 3});
    gsapInstance.timeline({
        scrollTrigger: {
            trigger: ".totem-animal .title",
            anticipatePin: 1,
            scrub: true,
            start: "center 50%",
            end: "bottom 45%",
        }
    }).to(".totem-animal .title .step2", {opacity: 1, top: 0, duration: 3});
    gsapInstance.timeline({
        scrollTrigger: {
            trigger: ".totem-animal .title",
            anticipatePin: 1,
            scrub: true,
            start: "center 45%",
            end: "bottom 35%",
        }
    }).to(".totem-animal .title .step3", {opacity: 1, top: 0, duration: 3});
    gsapInstance.timeline({
        scrollTrigger: {
            trigger: ".totem-animal .title",
            anticipatePin: 1,
            scrub: true,
            start: "center 35%",
            end: "bottom 30%",
        }
    }).to(".totem-animal .title .step4", {opacity: 1, top: 0, duration: 3});
    gsapInstance.timeline({
        scrollTrigger: {
            trigger: ".totem-animal .title",
            anticipatePin: 1,
            scrub: true,
            start: "center 30%",
            end: "bottom 25%",
        }
    }).to(".totem-animal .title .step5", {opacity: 1, top: 0, duration: 3});
    gsapInstance.timeline({
        scrollTrigger: {
            trigger: ".totem-animal .title",
            anticipatePin: 1,
            scrub: true,
            start: "center -20%",
            end: "bottom -100%",
            toggleClass: "active"
        }
    }).to(".totem-animal .title", {opacity: 1, duration: 1});
           

    .title {
        position: sticky;
        top: 30vh;
        z-index: 10;
        margin: 0 auto 0;
        background: #000;
        color: #EEEEEE;
        font-size: 114px;
        line-height: 138px;
        text-align: left;
        transition: .3s;

        &.active {
            opacity: 0 !important;
        }

        span {
            opacity: 0;
            top: 48px;
            position: relative;
            display: inline-block;
        }
    }

    .container .wrapper {
        z-index: 2;
        height: 115vh;
        background: rebeccapurple;
    }

}
     <section class="totem-animal bg-dark">
            <div class="container">
                <div class="wrapper">
                    <p class="title">
                        <span class="step1">Test</span>
                        <span class="step2">test</span>
                        <br>
                        <span class="step3">one  </span>
                        <span class="step4">two  </span>

     

×
×
  • Create New...