Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
invisibled

Setting TimelineMax tween duration to viewport height

Recommended Posts

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? 

Share this post


Link to post
Share on other sites

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

 

 

  • Like 7

Share this post


Link to post
Share on other sites

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!

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×