Update height property of Tween when resizing window

[nattha 2 Likes (Newbie)]

I would like to update the tween height based on the current window height. Because in Safari Mobile the window.innerHeight changes when we scroll (Bottom Navbar of the browser).

 

I saved the timeline in a constant. Is there a way to update the height property without to set the whole new timeline?

 

const tl = gsap
  .timeline({
    paused: true,
  })
  .to('.navbar', {
    height: window.innerHeight,
    duration: 0.3,
    ease: 'power2',
    backgroundColor: '#8E0919',
  })

window.addEventListener('resize', e => {
	// update tweeen height with window.innerHeight
})

 

[_Greg _ 127 Likes (Specialist)]

Hi!

Im not sure about perfomance and best practices, but you can use CSS values likevh, vw

 

tl.to('.navbar', {height: "100vh", duration: 1})

 

Its only one of the answer, and i don't sure that it's good choice

 

See the Pen QWyvRba by -greg- (@-greg-) on CodePen

[ZachSaucier 7,152 Likes (Superhero)]

Hey nattha. No, you can't really switch out values after tweens have been created without recreating them. In general it's best to recreate tweens and timelines if you need them to use different values.

 

With that being said, you could write your own logic using a proxy object and update the actual value that you're wanting to change. It's not quite as performant as normal tweens but you likely would never notice in real projects:

See the Pen ExPXaZE?editors=0010 by GreenSock (@GreenSock) on CodePen