Jump to content
Search Community

Bug resize window

ALTIMAX test
Moderator Tag

Go to solution Solved by ZachSaucier,

Recommended Posts

Hello,
I have a problem with the window resizing.
When I open my website, I scroll, everything works.
When I resize my web browser window, it generates a bug when I scroll again.
Indeed, Gsap stays with the size of my element + browser window before resizing.
I made a small video to show you my bug when I resize + scroll again.

 

Thanks to you.

Best regards

 

$(document).ready(function() {
    let $movie = $('.Video-container');
    if ($movie.length > 0) {
        movie();
    }
});

function movie() {
    gsap.set(".Video-pic", {
        xPercent: 0,
        yPercent: 0
    });
    gsap.to(".Video-pic", {
        width: '100vw',
        height: '100vh',
        scrollTrigger: {
            markers: true,
            pin: ".Video-container",
            start: "top top",
            scrub: true
        }
    });
}
<div class="Video">
    <div class="Video-container">
        <picture class="Video-pic container">
            <img class="Video-img" src="/images_contenu/conseiller.jpg" alt="">
        </picture>
    </div>
</div>
.container {
    margin: 0 auto;
    padding: 0 1.5rem;
    width: calc(100% - 4rem);

    @include media(">=small") {
        width: 72rem;
    }

    @include media(">=medium") {
        width: 96rem;
    }

    @include media(">=large") {
        width: 114rem;
    }

    @include media(">=extra-large") {
        width: 120rem;
    }
}
.Video{
    position: relative;
    margin: 15rem auto 0 auto;
    z-index: 2;
  &-container{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        top: 0;
    }
  &-pic{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        position: relative;
        top: 0;
    }
    
    &-img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

 

Link to comment
Share on other sites

  • Solution

Hey ALTIMAX. To get the values to update on resize you should use functional values and invalidateOnRefresh: true in the ScrollTrigger vars:

gsap.to(".Video-pic", {
  width: () => '100vw',
  height: () => '100vh',
  scrollTrigger: {
    markers: true,
    pin: ".Video-container",
    start: "top top",
    scrub: true,
    invalidateOnRefresh: true
  }
});

It's actually one of the most common ScrollTrigger mistakes.

  • Like 3
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...