Is there a shorter way to achieve this?

[HomTom]

The following code is working, but I'm not sure if this is the best way to write it.

const nav = document.querySelector('nav')
const tl = gsap.timeline({ paused: true, defaults: { duration: 0.5 } })

const showNav = tl.to(nav, { autoAlpha: 1 }) // override the visibility hidden from css
  .fromTo('nav li', { stagger: 0.1, y: 100, opacity: 0 }, { stagger: 0.1, y: 0, opacity: 1 })

Is there a better and shorter way to achieve the same?

[ZachSaucier]

Hey Thomas. 

 

I'd write that code like so:

const tl = gsap.timeline({ paused: true })
  .to('nav', { autoAlpha: 1 }) // override the visibility hidden from css
  .from('nav li', { stagger: 0.1, y: 100, opacity: 0 })

You can just use a selector string for the nav, GSAP's default duration is 0.5 so you can drop that, you don't need to save the tween to a variable, and you can just use a .from() tween assuming the normal value of the nav lis are y: 0 and opacity: 1.