Conditional element in timeline

[jesper.landberg]

const tl = new TimelineMax({ paused: true })
const element1 = document.querySelector('.js-element--1')
const element2 = document.querySelector('.js-element--2')
const element3 = document.querySelector('.js-element--3')

tl.from(element1, 1, {
  autoAlpha: 0,
  ease: Expo.easeOut
})

// If element2 exist, start after element1 is done
if (element2) {
  tl.from(element2, 1, {
    autoAlpha: 0,
    ease: Expo.easeOut
  })   
}

// If element3 exist, start after element2 is done, and if element2 not exist, start after element1
if (element3) {
  tl.from(element3, 1, {
    autoAlpha: 0,
    ease: Expo.easeOut
  })   
}

tl.play()

Does the above work?

EDIT: Seems like it works, any recommended way?

See the Pen jpaBQb by ReGGae (@ReGGae) on CodePen

[Carl]

Thanks for the demo. Sometimes its good just to test things like that.

 

What you are doing is fine, but its probably worth pointing out that those conditions only run when then timeline is being built, not when it is running.

In other words, if you restart the timeline, its not like those conditions will be re-evaluated and you'll get a different animation if the those elements got removed for some reason.

 

If you need the timeline to behave differently each time it is run, I would suggest creating a function that you call that would re-create the timeline based on the conditions that exist at that time. 

[jesper.landberg]

13 minutes ago, Carl said:

Thanks for the demo. Sometimes its good just to test things like that.

 

What you are doing is fine, but its probably worth pointing out that those conditions only run when then timeline is being built, not when it is running.

In other words, if you restart the timeline, its not like those conditions will be re-evaluated and you'll get a different animation if the those elements got removed for some reason.

 

If you need the timeline to behave differently each time it is run, I would suggest creating a function that you call that would re-create the timeline based on the conditions that exist at that time. 

 

Thanks for the tip.

 

Btw, which of the below would be preferable (timeline vs multiple tweenmax):

 

const tl = new TimelineMax({ paused: true })
const element1 = document.querySelector('.js-element--1')
const element2 = document.querySelector('.js-element--2')
const element3 = document.querySelector('.js-element--3')

tl.from(element1, 1, {
  autoAlpha: 0,
  ease: Expo.easeOut
})

if (element2) {
  tl.from(element2, 1, {
    autoAlpha: 0,
    ease: Expo.easeOut
  }, 0)   
}

if (element3) {
  tl.from(element3, 1, {
    autoAlpha: 0,
    ease: Expo.easeOut
  }, 0)   
}

tl.play()

 

Multiple TweenMax

 

const element1 = document.querySelector('.js-element--1')
const element2 = document.querySelector('.js-element--2')
const element3 = document.querySelector('.js-element--3')

TweenMax.from(element1, 1, {
  autoAlpha: 0,
  ease: Expo.easeOut
})

if (element2) {
  TweenMax.from(element2, 1, {
    autoAlpha: 0,
    ease: Expo.easeOut
  })   
}

if (element3) {
  TweenMax.from(element3, 1, {
    autoAlpha: 0,
    ease: Expo.easeOut
  })   
}