Can someone help me understand the conversion between a timeline length and pixels?

[darkus]

Sorry ahead of time for the ultranoob question

 

I've read the timeline part of the GSAP docs over and over and I think I understand most of what it says   I'm also getting most of my timelines to work well, probably our of sheer luck (goes to show how well GSAP is written I guess

 

But I have a fundamental question that I dont understand and need help with as my animations are getting more complex:

How do you translate pixel length into time for timeline duration/delay/etc?

 

Right now, if I setup a timeline with a scrolltrigger, say to trigger at the start and end of a certain div

 

let mytimeline = gsap.timeline({
     scrollTrigger: {
         trigger: ".myDiv",
          start:'top bottom',
          end:"bottom top",
          scrub: true,
          markers:true,

        }
    });

 

1. The actual scroll length of the mytimeline timeline is determined by the length of the div, how does that translate to the 'seconds' length of a GSAP timeline?  Is whatever the length of my div by default equal to 1 second, 10 seconds, etc..  for example?

 

2. If I start adding things to my timeline, then the timeline will lengthen since they are added to the end of the timeline, but by how much length is the timeline lengthened if no duration is explicitly given?

 

                                      mytimeline.to(
                                          ".mySecondDiv", {
                                              opacity: 0, 
                                                  }, 0);

 

3. In my above example, say I gave my .to a duration of 1 second, does that mean 1 second = 1000pixles (the height of .myDIv), for example?

 

Thank you!

[darkus]

As im playing around more I think I understand the timing better, you simply have to give all the parts and pieces of a timeline a duration, then you can actually control the specific timings of things.  So a timeline needs to be thought out and mapped out first before laying the first brick, if you want toget it correct

 

[Cassie]

Heya @darkus

Sounds like you're getting the hang of it, but here's a visual. Say you had the following timeline which is scrubbed over 1000px. It's 3 seconds long so let's split it into thirds.
 

ScrollTrigger.create({
  animation: tl,
  start: 'top top',
  end: '+=1000',
  scrub: true,
});

tl.to('.one',{
 duration: 1,
 rotate: 360
})
.to('.two',{
 duration: 2,
 rotate: 360
})

 

The first tween would last 1/3 of the distance ( 333.33px ) and the second would last 2/3 of the distance ( 666.66px )

         one                         two

|__________|____________________|

       1/3                           2/3

 

Let's add a delay - now the timeline is 4 seconds long - let's split it into quarters.
 

ScrollTrigger.create({
  animation: tl,
  start: 'top top',
  end: '+=1000',
  scrub: true,
});

tl.to('.one',{
 duration: 1,
 rotate: 360
})
.to('.two',{
 duration: 2,
 rotate: 360
}, '+=1')

 

The first tween would last 1/4 of the distance ( 250px ) then there would be a pause for 1/4 of the distance (250px) then finally the second tween would play for half of the distance (500px)
 

       one                 pause                      two

|__________|__________|____________________|

       1/4                  1/4.                        1/2

Aka, there's no set pixel to second conversion, the amount of scroll distance a tween takes up is dependant on how long it is in relation to the overall timeline. Think of time as ratios.

Mathematically 

 

(tween duration / timeline duration) * scroll distance scrubbed = (scroll distance covered by tween)

(2.5 seconds / 5 seconds) * 500 pixels = 250 pixels 

---

Hope this helps!

fyi - the default tween duration is 0.5s if not specified. Also, if you have easing curves that aren't linear applied they won't map over linearly to the scroll progress.