Jump to content
GreenSock

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

Update height property of Tween when resizing window

Recommended Posts

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

 

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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

  • Like 2
Link to comment
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.
×