Setting TimelineMax tween duration to viewport height

[invisibled]

I'm using TimelineMax to build a timeline of tweens as you scroll down the page. So far it's pretty basic, My page scroll listens to this function:

onScroll = ({ offset, limit }) => {
  const scrollPercentage = offset.y / ( limit.y - window.innerHeight )
  this.tl.progress(scrollPercentage)
}

And i am defining my tweens like so:

for (var i = 0; i < container.children.length; i++) {
  const article = container.children[i]
  const [ title ] = article.children

  this.tl.to( title, 100, { transform : 'translate3d(15vw,0,0)' })
}

What I want is for each tween's duration to be exactly the window height. Each article is 100vh so as soon as the article enters the viewport is the start of the tween, and as soon as it leaves the viewport is the end of the tween. I have the duration set to 100 just to play around with it, but it doesn't seem to effect the tween.

 

Can anybody point me in the right direction here? 

[elegantseagulls]

Hi @invisibled,

The duration of your tween won't make any difference here, as you are advancing the total progress of the tween from 0 to 1, so your duration number could be 0.2 or 100 and the result would be basically identical. I generally just set my duration to 1, so it matches progress in this situation. You'll also want to pause your timeline when you set it as well. 

 

Your math to get your duration math should be similar to this:

// Get scroll distance to bottom of viewport.
const scrollPosition = (window.scrollY + window.innerHeight);
    
// Get element's position relative to bottom of viewport.
const elPosition = (scrollPosition - el.offsetTop);
    
// Set desired duration distance. 
const durationDistance = (window.innerHeight); // Calculate tween progresss (100vh).
const currentProgress = (elPosition / durationDistance);

I'd also recommend making the jump to GSAP3, if you can.
 

You may also find this article helpful, as it covers similar progress math and a few other approaches to scroll-tied animations with GSAP (the bottom example of this article uses the scroll event listener):
https://medium.com/elegant-seagulls/parallax-and-scroll-triggered-animations-with-the-intersection-observer-api-and-gsap3-53b58c80b2fa

 

 

[invisibled]

wow, thank you so much. This information is EXACTLY what i needed. And I swear I was googling and experimenting all yesterday. You've really helped me understand the process and i've implimented it successfully into my project. THANKS!