Cusstom start/end position for Scroll Trigger

[momo12]

Hello guys,

 

I have 3 questions.

 

1- How can I tell ScrollTrigger to end the scroll animation when 60% of the div height has been scrolled up?

2- How can I tell ScrollTrigger to end the scroll animation when (70%+5em) of the div height has been scrolled up?

3- Also, another question: I saw this format somewhere: end: ="+500" what does this mean?

 

this is the one I have used but didn't work.

ScrollTrigger.create({
  trigger: ".s2-wr.projects",
  scroller: ".sections-wr",
  start: "40em 0%",
  end: 'center+=100px center',
  markers: true,
  scrub: 0.2,
  onEnter: () => gsap.to('.s2-wr.projects', {
    backgroundColor: "#ffffff",
    duration: 0.2,
  }),
  onLeave: () => gsap.to('.s2-wr.projects', {
    backgroundColor: "#000000",
    duration: 0.2,
  }),
    onLeaveBack: () => gsap.to('.s2-wr.projects', {
    backgroundColor: "#000000",
    duration: 0.2,
  }),
  onEnterBack: () => gsap.to('.s2-wr.projects', {
    backgroundColor: "#ffffff",
    duration: 0.2,
  }),
});

 

[Rodrigo]

Hi and welcome to the GreenSock forums!

 

You have to access the properties of the trigger element, most specifically the clientHeight property

// Use one of these
const endPoint = (box.clientHeight * 0.6);
const endPoint = (parseInt(getComputedStyle(document.documentElement).fontSize) * 5) + (box.clientHeight * 0.7);

gsap.to("#box", {
  x: 200,
  scrollTrigger: {
    trigger: "#box",
    scrub: 1,
    start: "top center",
    end: endPoint,
    markers: true,
  }
});

Finally the syntax you mention ("+=500") means 500 pixels after the start point, which is mentioned in the ScrollTrigger docs.

 

I encourage you to go through the docs and codepen examples to find out more about ScrollTrigger:

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

Finally this is a great resource to get started with ScrollTrigger:

https://www.creativecodingclub.com/courses/scrolltrigger-express?ref=44f484

 

Happy Tweening!!!

[GreenSock]

Yep, @Rodrigo is exactly right. And one thing you might want to do is leverage a function-based end value so that it dynamically updates on every ScrollTrigger.refresh() (which happens on screen resizes) in case the element's height changes based on the viewport or whatever. 

 

end: () => box.clientHeight * 0.6,

👍

[Carl]

maybe I'm reading this wrong but for

 

14 hours ago, momo12 said:

1- How can I tell ScrollTrigger to end the scroll animation when 60% of the div height has been scrolled up?

 

I think that could just be "60% bottom"

 

See the Pen jOxqVWJ by snorkltv (@snorkltv) on CodePen

 

the trigger div has a darker blue background to show 60% of its height (using a percentage-based gradient) the animation stops as soon the lighter blue portion becomes visible.

[momo12]

17 hours ago, Rodrigo said:

Hi and welcome to the GreenSock forums!

 

You have to access the properties of the trigger element, most specifically the clientHeight property

// Use one of these
const endPoint = (box.clientHeight * 0.6);
const endPoint = (parseInt(getComputedStyle(document.documentElement).fontSize) * 5) + (box.clientHeight * 0.7);

gsap.to("#box", {
  x: 200,
  scrollTrigger: {
    trigger: "#box",
    scrub: 1,
    start: "top center",
    end: endPoint,
    markers: true,
  }
});

Finally the syntax you mention ("+=500") means 500 pixels after the start point, which is mentioned in the ScrollTrigger docs.

 

I encourage you to go through the docs and codepen examples to find out more about ScrollTrigger:

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

Finally this is a great resource to get started with ScrollTrigger:

https://www.creativecodingclub.com/courses/scrolltrigger-express?ref=44f484

 

Happy Tweening!!!

Thanks a lot! I just started learning this amazing library!