kadircakir

Rodrigo you are AMAZING! It felt like I was about to lose my mind with this. When pinned true animation was working all fine, but when pinned to a specific section on the page it went all looney tunes. This worked like a charm! ScrollTrigger.config({ ignoreMobileResize: true }) Thanks a lot man, now I can finally get some sleep, haha.

Hey GSAP team, I have finally implemented this awesome animation thanks to Scrolltrigger. There is something weird we are experiencing on iOS devices though. The video seems to snap back without finishing the video and when scrolled down scale/grow on its own without interacting. I made an screen recording to give a better idea as everything is working fine in codepen and desktop devices. https://www.dropbox.com/scl/fi/523nany5speehrbfp06jp/RPReplay_Final1698089823.mp4?rlkey=0242obc90ektonmk3mocykzk5&dl=0 The animation is set up as; <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script> <script> const video = document.querySelector('.section-pin video source'); if (window.matchMedia("(max-width: 991px)").matches) { video.src = video.dataset.tabletSrc; } else if (window.matchMedia("(max-width: 767px)").matches) { video.src = video.dataset.mobileSrc; } else { video.src = video.dataset.src; } video.closest('video').load(); video.closest('video').play(); ScrollTrigger.defaults({ markers: false }); ScrollTrigger.create({ trigger: ".scale-video-wrapper", start: "top top", end: '+=1000', pin: '.section-pin' }); const tl = gsap.timeline({ scrollTrigger: { trigger: ".scale-video-wrapper", start: "top top+=100px", end: "+=1000px", toggleActions: "play reverse play reverse" // scrub: true } }); tl.to(".video", { duration: 0.2, scale: 1, // ease: "none", ease: "power4.in" }); function onVideoHasEnded() { tl.reverse(); } </script> <script> document.querySelector('.section-pin video').addEventListener("ended", function() { onVideoHasEnded() }); </script> Here is a prototype link for own testing if needed; https://glasnu-nl-20.webflow.io/glasnu-nl/video Any idea what could be causing this? Thanks in advance!

Thank you very much for the taken time and effort. Hope you have a lovely week ahead.

Hey.. My sincere apologies for the miscommunication. I am using Webflow as a No-Code tool and have implemented GSAP before but in a more simple manner. It wasn't never my intention to make it hard on you guys, I am just inexperienced. I've implemented the last code and it does seem to work but isn't returning to the original state when the video is done. (see preview below) https://gsap-scroll-trigger-animation-00b03f.webflow.io/ If it is too much trouble I would completely understand. I appreciate you guys a lot for the support you've always provided me with. https://codepen.io/studiokc/pen/RwEbMed Thank you.

Hi again, I've tried to implement it but think I am walking in the mist. Tried to see if the Yoyo post but doesn't seem to do much. https://codepen.io/studiokc/pen/OJrLQyx

Hey van Eijgen, Goedemorgen and thank you for getting back to me so swiftly. That has been of great help, I've managed to adjust the gap just now. Added some functions to scale back automatically when the video ends as well. But somethings seems to be breaking here, what would you suggest a better approach is? function onVideoHasEnded() { tl.reverse( https://codepen.io/studiokc/pen/MWZgpXB

Hey GSAP community, I am making great progress on a video animation using ScrollTrigger. What I want to add is that after the video snaps that it would be pinned and have some extra scroll before returning to its original size. What would be the best way to approach this? Thanks in advance for the taken time and effort! Great feeling to be part of such an amazing community.

You have definitely been of great help, Thank you very much for the taken time and effort!

Hoi again Thank you for providing an improved version. The snap more like I wanted it to be (really snappy haha). https://codepen.io/studiokc/pen/ExOJWzm For it to be like the animation I want to recreate I need help with the following points. 1. When the div is fully visible (center or bottom as value?) reaches the snap to the sides can occur. (did I set it up correctly?) 2. When the user would scroll further it should revert the snap back to it's original state. (How would you advice I go about this?) 3. Is there a functionality wherein the snapping back would also occur if the playing video had ended. (would be in loop but after it ends once preferably) How would you go about achieving this? Thanks for suggesting gsap.matchMedia() as well, looks very interesting. I will dive into this some more to see if how it can be implemented for this project. I am learning a lot through the expertise of the GreenSock Staff. My heartfelt thanks people.

Hi and Hoi van Eijgen, Thank you for taking the time and explaining it further. I really appreciate the extra care you guys offer. Think I've managed to apply the code in CodePen. https://codepen.io/studiokc/pen/YzRgQmx Would this be of any help? I want it to scroll out to the original position and have more of a real snap on scroll. And what would you advice to have the size adhere to the html constraint instead of the 768px now. Want to make it responsive for all screens by adjusting the size of the box with a container element which would have padding on horizontal axis to have more control on the size. Thanks a lot and hope you have great weekend.

Maybe this can help? Below you can find the code I have for what I have at the moment. Just want it to snap on scroll like on polestar.com and go to original size when scrolled out. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script> <script> gsap.to('.intro', { scale: 1, borderRadius: '0', ease: 'none', scrollTrigger: { trigger: '.intro', start: 'top bottom', end: 'top center', scrub: true, }, }) if (window.innerWidth > 768) { gsap.to('.section_intro', { ease: 'none', scrollTrigger: { trigger: '.section_intro', start: 'top top', end: 'center top', scrub: true, pin: '.section_intro', }, }) } </script> Project is being developed in Webflow and have test in the read-only link below; https://preview.webflow.com/preview/gsap-scroll-trigger-animation-00b03f?utm_medium=preview_link&utm_source=designer&utm_content=gsap-scroll-trigger-animation-00b03f&preview=6d49f7f967aadde31da3270c753af7f8&workflow=preview Hope this helps.

I am not too code-savvy unfortunately and have implemented earlier GSAP interactions with help from others. Would it be possible to analyse the interaction from polestar.com and give me advice on how best to achieve it? So no issue at hand actually but more advice needed in achieving the animation with ScrollTrigger (if possible of course). Hope I am communicating it clearly, if I can further assist with anything please let me know. Any help would be really appreciated.

Hello GreenSock Community, First off I want to thank the whole community and the GreenSock team for the amazing help and support. Your help has always been so impressive and memorable. I've definitely learned and achieved things I couldn't without you. Stumbled on an animation recently which uses scrolling as a trigger. What I would like is to recreate the snap on scroll video animation from the polestar.com website in my project. The idea is that it needs to scroll snap into full width and when scrolling back comes back to it's original size. And can I use the ScrollTrigger for the same text effect (from top down) as well? This is my current project which wouldn't be possible without you guys. Code I am using for another ScrollTrigger animation in my current project is; <script> gsap.registerPlugin(ScrollTrigger); ScrollTrigger.defaults({ markers: false }); // Logo Scale $(".section.is--hero").each(function (index) { let triggerElement = $(this); let targetElement = $(".nav_logo"); let tl = gsap.timeline({ scrollTrigger: { trigger: triggerElement, // trigger element - viewport start: "top top", end: "bottom top", scrub: 1 } }); tl.from(targetElement, { y: "-90%", width: "100%", duration: 1 }); }); // Header Text Hide $(".header_text-move").each(function (index) { let triggerElement = $(this); let targetElement = $(this); let tl = gsap.timeline({ scrollTrigger: { trigger: triggerElement, // trigger element - viewport start: "-100% top", end: "30% top", scrub: 0.8 } }); tl.to(targetElement, { y: "100%", duration: 1 }); }); // Sticky Circle Grow $(".sticky-circle_wrap").each(function (index) { let triggerElement = $(this); let targetElement = $(".sticky-circle_element"); let tl = gsap.timeline({ scrollTrigger: { trigger: triggerElement, // trigger element - viewport start: "top top", end: "bottom bottom", scrub: 1 } }); tl.fromTo( targetElement, { width: "35em", height: "35em", borderRadius: "35em", duration: 1 }, { width: "100vw", height: "100vh", borderRadius: "0em", duration: 1 } ); }); </script> Hope there is a talented person who can help me achieve this animation in my Project. Thanks in advance for the taken time and effort! Please never change as you guys are simply great!