Scroll trigger animation and page scroll up

[ssense]

Hi, I have a problem with the animation of the page when I scroll up the page. I don't know why when scrolling up the animation works incorrectly. The images appear in the wrong order, you can check this for yourself in inspection mode. I am uploading a preview of the code and a preview of the page on the deployment. The problem is with the 3 sections from the top of the page with the anchor element and changing images.

 

<script>
 // use a script tag or an external JS file
 document.addEventListener("DOMContentLoaded", (event) => {
  gsap.registerPlugin(ScrollTrigger,SplitText,Draggable)
  
  

// one
    let feature_6_content_one_tl = gsap.timeline({
    scrollTrigger: {
            trigger: ".feature-6-content.one",
      start: "top 90%",
      end: "bottom 70%",
      toggleActions: "restart none restart none",
      markers: false
    }
});
  
  feature_6_content_one_tl.from(".feature-6-image-item", {
    duration: 1,
    ease: "none",
    opacity: 0
})
    .to(".feature-6-image-item.one", {
    duration: 1,
    ease: "none",
    opacity: 1,
    })
  .from(".feature-6-image-1-pin", {
    duration: 1.5,
    ease: "power3.out",
    stagger: {
        each: 0.1,
            from: 'end',
    },
    y: -150,
    opacity: 0
    });
// end one

// two
    let feature_6_content_two_tl = gsap.timeline({
    scrollTrigger: {
            trigger: ".feature-6-content.two",
      start: "30% 90%",
      end: "bottom 70%",
      toggleActions: "restart none restart none",
      markers: false
    }
});
  
  feature_6_content_two_tl.to(".feature-6-image-item", {
    duration: 1,
    ease: "none",
    opacity: 0
})
    .to(".feature-6-image-item.two", {
    duration: 1,
    ease: "none",
    opacity: 1
    });
// end two
  

// three
    let feature_6_content_three_tl = gsap.timeline({
    scrollTrigger: {
            trigger: ".feature-6-content.three",
      start: "30% 90%",
      end: "bottom 70%",
      toggleActions: "restart none restart none",
      markers: false
    }
});
  
  feature_6_content_three_tl.to(".feature-6-image-item", {
    duration: 1,
    ease: "none",
    opacity: 0
})
    .to(".feature-6-image-item.three", {
    duration: 1,
    ease: "none",
    opacity: 1
    });
    
    
$(".feature-6-image-3-row").each(function () {
  gsap.to($(this), {
    duration: 45,
    xPercent: "-=100", 
    ease: "none", 
    repeat: -1 
    });
});
// end three

// four
    let feature_6_content_four_tl = gsap.timeline({
    scrollTrigger: {
            trigger: ".feature-6-content.four",
      start: "30% 90%",
      end: "bottom 70%",
      toggleActions: "restart none restart none",
      markers: false
    }
});
  
  feature_6_content_four_tl.to(".feature-6-image-item", {
    duration: 1,
    ease: "none",
    opacity: 0
})
    .to(".feature-6-image-item.four", {
    duration: 1,
    ease: "none",
    opacity: 1
});

let width_feature_6_image_4 = $(".feature-6-image-4").width();
let width_feature_6_image_4_dragger = $(".feature-6-image-4-dragger").outerWidth();
gsap.set(".feature-6-image-4-dragger", {x:(width_feature_6_image_4/2-width_feature_6_image_4_dragger/2)});
Draggable.create(".feature-6-image-4-dragger", {
  type: "x",
  bounds: $(".feature-6-image-4"),
  inertia: true,
  onDrag: function () {
      let x = width_feature_6_image_4 - gsap.getProperty(this.target, "x");
    gsap.set(".feature-6-image-4-after-img", {clipPath: `inset(0px ${x-width_feature_6_image_4_dragger/2}px 0px 0px)`})
  },
});

var feature_6_image_4_dragger_tl = gsap.timeline();
  feature_6_image_4_dragger_tl.from(".feature-6-image-4-dragger-img-wrap", {
    duration: 2,
    repeat:-1,
    repeatDelay: 1,
    ease: "bounce.out",
    x: 10,
})

   $('.feature-6-image-4-dragger').on('mouseenter',()=>{
     feature_6_image_4_dragger_tl.pause();
   })
  
  $('.feature-6-image-4-dragger').on('mouseleave',()=>{
    feature_6_image_4_dragger_tl.play();
  })
// end four

// three
    let feature_6_content_five_tl = gsap.timeline({
    scrollTrigger: {
            trigger: ".feature-6-content.five",
      start: "30% 90%",
      end: "bottom 70%",
      toggleActions: "restart none none none",
      markers: false
    }
});
  
  feature_6_content_five_tl.to(".feature-6-image-item", {
    duration: 1,
    ease: "none",
    opacity: 0
})
    .to(".feature-6-image-item.five", {
    duration: 1,
    ease: "none",
    opacity: 1
});
    
    
$(".feature-6-image-5-row").each(function () {
  gsap.to($(this), {
    duration: 40,
    xPercent: "-=100", 
    ease: "none", 
    repeat: -1 
    });
});
// end five

// end stick scroll

  
  // gsap end code
});

</script>

[Rodrigo]

Hi @ssense and welcome to the GSAP Forums!

 

There is not a lot we can do to debug on a live site, without a minimal demo is really hard for us to track down issues.

 

The one thing I can see based on the URL you shared and the code snippet you provide, is that maybe a timeline would be a far better approach for this, as shown in these demos:

See the Pen wvZqwyg by GreenSock (@GreenSock) on CodePen

 

See the Pen rNbELKO by GreenSock (@GreenSock) on CodePen

 

A scrubbed timeline (that can also include call() methods) would be the best way to ensure that this works in the correct way in both directions:

https://gsap.com/docs/v3/GSAP/Timeline/call()

 

You can use the call method to create the tweens you want inside the timeline:

const tl = gsap.timeline({
  scrollTrigger: {
    // ScrollTrigger config here
  }
});

tl.call(() => {
  gsap.fromTo(image, { opacity: 0 }, { opacity: 1 });
}, [], position)

 

Hopefully this helps.

Happy Tweening!