ALTIMAX Posted February 26, 2021 Share Posted February 26, 2021 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; } } resize bug.mp4 Link to comment Share on other sites More sharing options...
Solution ZachSaucier Posted February 26, 2021 Solution Share Posted February 26, 2021 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. 3 Link to comment Share on other sites More sharing options...
ALTIMAX Posted February 26, 2021 Author Share Posted February 26, 2021 hey Zach, you are very fast! Thanks a lot, it works but I have another problem coming up, it's for the responsive. As you can see on the video, it doesn't take the new width/height of my div. When I refresh, it's ok ... How do I do it ? Thanks again for your help. Best regards, Resize-2.mp4 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 26, 2021 Share Posted February 26, 2021 It's hard to say without seeing the code. Can you please create a minimal demo of the issue and share it with us? You might even figure out the issue in the process of making the minimal demo. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now