vierless_julian

Update: This is my new code: document.addEventListener("DOMContentLoaded", function() { const videoContainer = document.querySelector(".hero-vertical_video"); const background = document.querySelector(".hero-vertical_image"); // Function to calculate element offsets const calculateOffsets = () => { videoContainerOffset = window.pageYOffset + videoContainer.getBoundingClientRect().top; backgroundOffset = window.pageYOffset + background.getBoundingClientRect().top; }; // Initial offset calculation let videoContainerOffset, backgroundOffset; calculateOffsets(); // GSAP animation gsap.registerPlugin(ScrollTrigger); // Determine the scale value based on the device's characteristics const scaleValue = window.innerWidth < 992 ? 1.8 : 1.4; gsap.to(".hero-vertical_video", { x: "50%", y: "37%", // z: "0", skewX: "0deg", skewY: "0deg", scaleX: scaleValue, // Use the determined scale value scaleY: scaleValue, // Use the determined scale value rotation: 0, // perspective: 0, duration: 1, ease: "power4.out", scrollTrigger: { trigger: ".hero-vertical_video", // onUpdate: calculateOffsets, start: () => "top " + videoContainerOffset + "px", end: "top 10%", scrub: 0.75, // toggleActions: "restart none none none" } }); gsap.to(".hero-vertical_image", { // filter: "blur(40px)", scaleX: 0.75, scaleY: 0.75, duration: 1, ease: "power4.out", scrollTrigger: { trigger: ".hero-vertical_video", // onUpdate: calculateOffsets, start: () => "top " + backgroundOffset + "px", end: "top 10%", scrub: 1, // toggleActions: "restart none none none" } }); // Recalculate offsets on screen resize window.addEventListener("resize", () => { calculateOffsets(); }); }); If I comment the rotation and the skewX out, I get strange results. Suddenly the rotation is set to 8deg or something else is wrong, so I kept it in.

Hi @GreenSock! Thank you very much for your help! I am still not very experienced with GSAP and kind of stumbled my way to this working solution. Now I am making adjustments based on your recommendations. About the onUpdate: I was trying to take into account that the position of the video changes in the DOM depending on the text wrapping since this changes the height and therefore the distance to the top of the page. Also I wanted to change a value (the scale) when on mobile devices and this should update when resizing the browser. Your point 4 is interesting! I was thinking about a solution that animates opacity of an overlay for that image from 0 to 100%. The overlay could have the backdrop-filter property and blur the image behind the overlay. Do you think this solution could work and how do you think about performance in that case? Also do you have a working example for the blurred image solution you are referring to? I'd love to explore this and try it out myself.

Hey guys, I need your help! We are working on our new page and I am trying to get an scroll animation to work. I have a video on the top of the page that I want to transform on scroll. At the same time a background image is blurred. I tried getting it to work with Webflow interactions but the scroll triggers confused me too much. The animation is loading fine but it feels a little laggy. Especially in Chrome. Safari works fine. Also Arc which is based on Chrome works fine. Could someone look into that? This is our page: https://cf-vierless.webflow.io This is my code: document.addEventListener("DOMContentLoaded", function() { const videoContainer = document.querySelector(".hero-vertical_video"); const background = document.querySelector(".hero-vertical_image"); // Function to calculate element offsets const calculateOffsets = () => { videoContainerOffset = window.pageYOffset + videoContainer.getBoundingClientRect().top; backgroundOffset = window.pageYOffset + background.getBoundingClientRect().top; }; // Initial offset calculation let videoContainerOffset, backgroundOffset; calculateOffsets(); // GSAP animation gsap.registerPlugin(ScrollTrigger); gsap.fromTo(".hero-vertical_video", { x: "28%", y: "37%", z: "0", skewX: "0deg", skewY: "8deg", scaleX: 1, scaleY: 1, rotation: 0, perspective: 0 }, { x: "50%", y: "37%", z: "0", skewX: "0deg", skewY: "0deg", scaleX: 1.4, scaleY: 1.4, rotation: 0, perspective: 0, duration: 1, ease: "power4.out", scrollTrigger: { trigger: ".hero-vertical_video", onUpdate: calculateOffsets, start: () => "top " + videoContainerOffset + "px", end: "top 10%", scrub: 0.75, toggleActions: "restart none none none" } }); gsap.to(".hero-vertical_image", { filter: "blur(40px)", scaleX: 0.75, scaleY: 0.75, duration: 1, ease: "power4.out", scrollTrigger: { trigger: ".hero-vertical_video", onUpdate: calculateOffsets, start: () => "top " + backgroundOffset + "px", end: "top 10%", scrub: 1.5, toggleActions: "restart none none none" } }); // Recalculate offsets on screen resize window.addEventListener("resize", () => { calculateOffsets(); }); });

@mvaneijgen This is my first time of implementing a GSAP animation. So I appreciate any tips on how to improve my current code. Talking about the transition: all, we are using WordPress and a page builder for the page and the most of the CSS is generated through it. Unfortunately it adds a lot of all values. But also here: If you have tips on how to improve/change this I am open to hear them!

@Rodrigo @mvaneijgen I recorded a loom video for the support of our caching tool. Maybe it can show a little bit better what I am refering to. https://www.loom.com/share/401146a1bcf54e7396e0825ca4e75833

Hi fellow GSAP friends, a few months ago I was asking for a scrub animation that we were developing for our new page. This page is now live and we are receiving some weird laggy bug after loading the page. The animation appears super laggy for a few seconds and then slowly gets better until it runs smoothly after some time. The live page is: https://vierless.de/ The prototype I built a few months ago that is running on our live site now can be seen in codepen: https://codepen.io/julian_witzel/pen/wvEjpgL I hope someone has an idea why this is happening and how we can stop this.

Thanks for your help guys! I came already pretty close to the effect using this code: gsap.registerPlugin(ScrollTrigger); gsap.fromTo('.video-container', { x: '0', y: '0', z: 0, skewX: '0deg', skewY: '8deg', scaleX: 1, scaleY: 1, rotation: 0, perspective: 0, }, { x: '12vw', y: '4vw', z: 0, skewX: '0deg', skewY: '0deg', scaleX: 1.7, scaleY: 1.7, rotation: 0, perspective: 0, duration: 1, scrollTrigger: { trigger: '.video-container', start: 'top 50%', end: 'top 20%', scrub: true, toggleActions: 'restart none none none', }, }); For me the output that GSAP gives the container is the following: transform: perspective(0.5px) translate3d(11.804vw, 3.9347vw, 0px) skew(0deg, 0.1307deg) scale(1.6886, 1.6886); I don't know why there is the "perspective" in there and also I don't get "scale3d" if this changes something... Also, when I scroll the animation feels like it's waiting for around 500ms - 1000ms and then snaps to the endpoint. Here is where I am working on: https://b124w16.myraidbox.de/ Maybe you have some ideas to improve my current animation?

Hi guys, I am trying to build an animation similiar to the top of this page: https://web.archive.org/web/20230301003141/https://experiencewelcome.com/ The video transforms into position. However I am having problems with the correct code. When I put skew into the JS, it says I have a missing plugin or the variable is wrong. All I put was "skew: 0," but it is unknown for some reason. Can someone help here?