[Start and end point loading wrong]

Thank you so much! It worked!

[Start and end point loading wrong]

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!

See the Pen qBgPvwm by camianana (@camianana) on CodePen

[Change background on scroll]

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! 

 

See the Pen dyaVPKa by camianana (@camianana) on CodePen

[Change background on scroll]

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

[Change background on scroll]

Thanks @GSAP Helper

 

Here's my demo link 

See the Pen VwgzoaG by camianana (@camianana) on CodePen

 

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

[Change background on scroll]

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>

 

[Animate multiple objects with the same timeline]

5 minutes ago, 1amShaw said:

Apologies for the brief answer, but have you seen this article?
(Disclaimer: I am no GSAP expert)

This is exactly what I needed, thanks!

[Animate multiple objects with the same timeline]

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