How can I get the position of scrollbar in a timeline?

[yeisonvelez11]

 

 

I have a series of timeline, and I want to know how I can get the initial and final position of the scrollbar of a certain element within the timeline.

 

I have code like this:

 

    tl.from("#square", {
      autoAlpha: 0,
      scale: 4,
      duration: 3,

    });

    tl.to("#square", {
      x: 100,
      duration: 3,
    });

    tl.to("#square", {
      rotation: 50,
      duration: 3,
    });

    tl.to("#square", {
      x: 20,
      duration: 3,
    });

     tl.to("#square", {
      scale: 1,
      duration: 3,
    });
   //***************************************************
    //I need the position initial and end of scrollbar in the next trigger
   tl.to("#square", {
     background:"yellow",
      rotation: 0,
      duration: 3,
    });

    tl.to("#square", {
      x: 100,
      duration: 3,
    });

 

 

and I want to know for this timeline:

 

    //I need the position of scrollbar in the next trigger
   tl.to("#square", {
     background:"yellow",
      rotation: 0,
      duration: 3,
    });

 

the initial position of the scrollbar when it animation starts and when it ends. but I need to get this data before the trigger runs.

 

how can I do it?

 

this is my live code:

 

http://plnkr.co/edit/HACVQky2IkNmz9Zz?open=lib%2Fscript.js

[ZachSaucier]

Hey yeisonvelez11.

 

When your ScrollTrigger has a scrub, all of the timings and positions of your tweens are dependent on the proportion of the tween's duration compared to the timeline's total duration along with the start and end position of the ScrollTrigger. So to get the start and end scroll position of a particular tween of a timeline with a scrub ScrollTrigger, you need to get the start and end scroll position of the ScrollTrigger, the proportion of the start of the tween compared to the total timeline's duration, and the proportion of the end of the tween compared to the total timeline's duration. You can then use the proportions of the start and end along with the scroll positions of the ScrollTrigger to find the scroll positions that you need.

 

For example, add an ID of "myTween" to your tween then you can use this:

gsap.delayedCall(0.1, () => {
  const ST = tl.scrollTrigger;
  const tween = tl.getById("myTween");
  const startTime = tween.startTime();
  const endTime = tween.endTime();
  const totalTime = tl.duration();
  const STDist = ST.end - ST.start;
  const tweenStartPos = (startTime / totalTime) * STDist + ST.start;
  const tweenEndPos = (endTime / totalTime) * STDist + ST.start;
  console.log(tweenStartPos, tweenEndPos);
});

The reason why it's in a delayed call is because ScrollTrigger needs to set itself up first. You could use an event listener for that instead if you'd like.