Jump to content
Search Community

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

IvanK test
Moderator Tag

Recommended Posts

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>
                         
                    
                
            
         
        

 

Link to comment
Share on other sites

  • IvanK changed the title to In the mobile version of the site, when you start scrolling up or down, an offset appears

Welcome to the forums @IvanK

 

It's hard to advice on problems without a minimal demo so we can interact with it, but I did notice that you have transition in your CSS. That might be interfering with GSAP. You should be explicit about your CSS transition to ensure it doesn't conflict with a property GSAP is animating.

 

transition: opacity 0.3s;

 

  • Like 1
Link to comment
Share on other sites

13 minutes ago, IvanK said:

https://prnt.sc/1zz99gh I found the same problem on the main page https://greensock.com/scrolltrigger /, you need to log in from the iphone, safari browser, and scroll up and down diligently

I tried Safari on desktop, iPad, and iPhone - zero problems. I scrolled around like crazy. 🤷‍♂️ I'm not really sure what you're seeing. Please provide a minimal demo (a CodePen, not a live site) with specific instructions about how to reproduce and we'd be happy to take a look. 

Link to comment
Share on other sites

Oh, yeah, that's normal - it's because Safari is literally changing the height of the viewport when it shows/hides the browser chrome (address bar). ScrollTrigger waits until scrolling is done before it fires a ScrollTrigger.refresh() to re-calculate the start/end positions. It's not a bug - it's a logic issue. The only way around it that I know of is to wrap everything in a <div> that's position: fixed and have that handle all the scrolling instead of the <body> so that Safari doesn't show/hide the address bar. Obviously you'd need to change the "scroller" on the ScrollTriggers too. 

  • Like 2
Link to comment
Share on other sites

53 minutes ago, Cassie said:

Hey @jxy - this is absolutely the opposite of what we want.

What makes you feel this way - could you elaborate?

Hi Cassie, sorry let me take that back. 😅

As a noob, I find everything related to web development overwhelming, not just limited to learning about GSAP.

 

But I do sometimes found the site a bit hard to browse. For example, when I was eating out just now, I took out my phone to log on greensock.com to check out the draggable plugin page. Initially the page didn't load for a long 10 seconds, showing me a page with header and footer but empty content, before it fetches content from server, which then caused what I believe is called Cumulative Layout Shift.  When the page finally loads, it looks like this on my chrome/iphone:

https://imgur.com/e3Y9ffh

 

Granted, this is not a big issue at all! And I feel soooo grateful for something like GSAP exists to make animation sooo much easier! Ideally though I want the documentation to be like https://tailwindcss.com/

 

By the way, love your personal website! The design! All the animations are delightful! Especially your avatar animation! 

I have always been wanting to ask, how did you make the" pens flowing out like water" effect?😃

 

1757701688_Screenshot2021-11-18at8_08_29PM.png.93250be7e8baa966c301fa793634d835.png

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...