Jump to content

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

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 )

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):



  • 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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.