camAnana

Thank you so much! It worked!

Hey everyone! I'm using ScrollTrigger to change the background color of the body when a section scrolls in. I have multiple sections related to this ScrollTrigger and everything is working fine. The codepen that I've added is just to show my ScrollTrigger code The only problem that I have is that I have a lot of images on this website and inside these sections, so their start and end points aren't being positioned correctly because they get placed before the images load (the section is smaller at that moment). When I resize the screen or reload it after all the images are loaded, the start and end points are placed correctly. What can I do to solve this? I tried loading everything related to Scrolltrigger inside this function document.addEventListener('DOMContentLoaded', function() { but it didn't work. I've also tried to use a timeout, but it didn't work either. Thanks!

Hello again @Rodrigo I'm trying to make the demo you sent me work with my project but I'm having trouble calling every section. Do you know why could it be? Thanks! https://codepen.io/camianana/pen/dyaVPKa

Thanks again for your quick response, I will try to implement the demo example, but where can I find the latest versions of the files and plugins? Thanks

Thanks @GSAP Helper Here's my demo link https://codepen.io/camianana/pen/VwgzoaG As you can see, the transition while scrolling down is working fine, but when scrolling up the initial status of the color is wrong, so it does a weird transition

Hi! I'm trying to achieve the same result, but I'm not able to create a smooth transition because the value of the variable keeps restarting. I'm working on Webflow and this is my read-only link <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script> <script> gsap.registerPlugin(ScrollTrigger); gsap.to(".peliculas-bg", { "--color": "#FFD684", scrollTrigger: { trigger: "#pelicula-2013", start: "top center", end: "bottom center", markers: true, toggleActions: "restart none restart pause" }, }); gsap.to(".peliculas-bg", { "--color": "#A6FFFE", immediateRender: false, scrollTrigger: { trigger: "#pelicula-2014", start: "top center", end: "bottom center", markers: true, toggleActions: "restart none restart pause" }, }); gsap.to(".peliculas-bg", { "--color": "#1C3448", immediateRender: false, scrollTrigger: { trigger: "#pelicula-2015", start: "top center", end: "bottom center", markers: true, toggleActions: "restart none restart pause" } }); </script>

This is exactly what I needed, thanks!

Hi, I'm new to gsap and I'm trying to create a complex scroll animation where I need to animate multiple objects in a different way using the same timeline. This is my current code, but my issue with this is that each time I add a ".to" animation it creates a small delay between each one, and I need it to happen at the same time gsap.registerPlugin(ScrollTrigger); let tl = gsap.timeline({ scrollTrigger: { trigger: ".usages-scroll1", start: "center center", end: "bottom center", toggleActions: "restart pause reverse pause", markers: {startColor: "green", endColor: "red"} } }); tl.to(".usage-finance", { x: 500 }) .to(".usage-people", { x: 200 }); How can I make it happen all at the same time? Thanks