Multiple image movement declaration

[MatteoNet]

I have a section, which contains 5 images, initially they are all overlapping centered, when scrolling they move towards the edges of the container, after this i have a horizontal scroll section and i wold have below this section i have horizontal scroll section, my ultimate goal is to,
1) Animate the images of the first section
2)Finish the animations of the first segment, remove the pin and its height
3) block both sections and obtain a reduction of the first section while the one below appears from below the previous one
4) start the animation of the horizontal section.

 

 is this the correct way to declare my code? (sorry for my english but it's not my language)

 

 gsap.to(".hero-img-1", {
        scrollTrigger: {
          trigger: ".many-image-move-trigger",
          start: "bottom bottom",
          end: "100%",
          scrub: 1,
        },
        left: 44,
        top: 118,
        width: 391,
        height: 249,
      });

      gsap.to(".hero-img-2", {
        scrollTrigger: {
          trigger: ".many-image-move-trigger",
          start: "bottom bottom",
          end: "100%",
          scrub: 1,
        },
        left: "50%",
        top: 89,
        xPercent: -50, // per centrare orizzontalmente
        width: 312,
        height: 120,
      });

      gsap.to(".hero-img-3", {
        scrollTrigger: {
          trigger: ".many-image-move-trigger",
          start: "bottom bottom",
          end: "100%",
          scrub: 1,
        },
        right: 44,
        top: 44,
        width: 316,
        height: 464,
      });

      gsap.to(".hero-img-4", {
        scrollTrigger: {
          trigger: ".many-image-move-trigger",
          start: "bottom bottom",
          end: "100%",
          scrub: 1,
        },
        left: 352,
        bottom: 44,
        width: 468,
        height: 316,
      });

      const heroReduce = () => {
        console.log("Ciao l'animazione è finita");
        gsap.to(".img-hero", {
  scrollTrigger: {
    trigger: ".first",
    start: "bottom bottom",
    scrub: 1,
    pin: ".first",
  },
  y: "-100%",
  duration: 2.5,
  ease: "power4.out",
      };

      gsap.to(".hero-img-5", {
        scrollTrigger: {
          trigger: ".many-image-move-trigger",
          pin: ".many-image-move",
          start: "bottom bottom",
          end: "100%",
          scrub: 1,
          id: "one",
        },
        onComplete: heroReduce,
        right: 164,
        bottom: 96,
        width: 344,
        height: 200,
      });

 

 

 

 

 

[GSAP Helper]

Hi @MatteoNet and welcome to the GreenSock forums!

 

I don't have a lot of time right now to dig into everything here, but I wanted to offer you some quick advice about how to get the most out of these forums...

 

Keep it simple. Don't list a bunch of requirements ("it should animate over each section, and gradient colors over those children, force animation on hero load and then have ScrollTrigger take over dynamically...and I think my code is a mess so please help clean it up" - that's too hard to follow). Just pick the very first thing and see if you can make that work. If you get stuck, post one question focused on that one piece, like "how can I pin each section one at a time?" Keep your CodePen focused only on that one piece with as little code/markup as possible. Then once that's answered, move on to your next question/problem. 

 

Baby steps 😉

 

Before you know it, things will fall into place one at a time.

 

Again, try not to list out all the problems. Break them apart. You'll get a lot more people willing to help you if you keep things simple and clear. A well-crafted minimal demo is GOLD around here - you'll get people falling over themselves to help you if you make a CodePen that's super clear and isolates the issue. Explain exactly how to reproduce the problem, like "scroll down to the blue section and notice how it pins before it hits the top of the viewport" for example.

 

Don't worry - this community has got your back when it comes to GSAP-specific questions. I just wanted to provide some pointers on how to help us help you.