Make image move twice with ScrollTrigger

[arual]

Hi everybody,

I've managed to move an image from a section to another section on scroll (see attached image and code) and now i want to make the same move with the same image. I want to move it from the second section to the third one. Anybody has an idea?

gsap.to(".hero__image", {
  xPercent: 40,
  scrollTrigger: {
    trigger: ".hero__image",
    start: "center center",
    pin: true,
        endTrigger:".hero__end",
        end:"center center",
        onLeave: () => { gsap.to('.hero__image', { opacity: 1, scale: 1.2 }) },
      onEnterBack: () => { gsap.to('.hero__image', { opacity: 0.2, scale: 1 }) },
    scrub: true
  }
});
 

[Али К]

Hello @arual you can find the code here , 

See the Pen 5f648245421eab7821bb6bbc537892ee by itsalimanuel (@itsalimanuel) on CodePen

[arual]

19 minutes ago, Ali Manuel said:

Hello @arual you can find the code here , 

 

Hello, @Ali Manuel 

Thank you for your response. Really appreciate it. Is it possible to put an end trigger in this sections: .to(".image", { xPercent: 40, yPercent: 2 }) ?

I have a class for each section and I want the image to stop in every section when it reaches the viewport and then on scroll move again. I want an edn point like in my example. It works perfect for first two section but when I want to move it again I just don't know how.

[Cassie]

Can you add a minimal demo of what you've tried Arual?

[arual]

12 minutes ago, Cassie said:

Can you add a minimal demo of what you've tried Arual?

I shared my code that works and a image of what I want to achieve. I can't share a demo as I integrate ScrollTrigger into Elementor on WordPress and I can't publish the website yet. @Ali Manuel 's answer helps me I just want to know how could I add endTrigger (as in my code) to their code. I did try and searched for a solution and I do not want someone writes all the code for me, just some tips and ideas. Thanks.

[Али К]

@arual are you trying to do something like this ?

See the Pen 5f648245421eab7821bb6bbc537892ee by itsalimanuel (@itsalimanuel) on CodePen

[arual]

1 hour ago, Ali Manuel said:

@arual are you trying to do something like this ?

 

@Ali Manuel I used your code and created something to be able to explain clearer. Below is my code. I want the same behavior for moving the image from red section to the green one as the one from moving the image from the blue section to the red one. Do you have any idea?

See the Pen OJpEWKR by laura-olteanu (@laura-olteanu) on CodePen

[Cassie]

You'd probably have more luck with a timeline...

See the Pen 35956516e6831ec8903c034145a7ce35 by cassie-codes (@cassie-codes) on CodePen

But as I said before when you first posted - if you're trying to move an element between states, the FLIP plugin is what you're after.

If you're just using this as an exercise in learning GSAP and moving elements around it might be an idea to start here with our getting started article, then have a look at the scrolltrigger demos or docs