Can i reference an object with stored attributes and values, in a timeline/tween?

[jesper.landberg]

this.state = {
  enter: {
    yPercent: 25,
    xPercent: 25,
    alpha: 0,
    skewX: -10
  },
  neutral: {
    yPercent: 0,
    xPercent: 0,
    alpha: 1,
    skewX: 0
  },
  leave: {
    yPercent: -25,
    xPercent: -25,
    alpha: 0,
    skewX: 10
  }
}

TweenMax.fromTo(el, 0.5, {
  this.state.enter
}, {
  this.state.neutral,
  ease: Expo.easeOut
})

 

Is it possible to do something like my example above? The exact example does not work.

[Jonathan]

Hello @jesper.landberg

 

You can certainly reference objects stored in attributes and values with GSAP

 

But the code the way you have it now wouldn't work due to the object outputted tweens will be malformed in syntax due to extra squiggly brackets. { }

 

You would have to do something like the below example

 

See the Pen RZbbez by jonathan (@jonathan) on CodePen

 

 

 

// this will work
this.state = {
  enter: {
    yPercent: 25,
    xPercent: 25,
    alpha: 0,
    skewX: -10
  },
  neutral: {
    yPercent: 0,
    xPercent: 0,
    alpha: 1,
    skewX: 0,
    ease: Expo.easeOut // added so its in the object 
  },
  leave: {
    yPercent: -25,
    xPercent: -25,
    alpha: 0,
    skewX: 10
  }
}

var el = document.getElementById("el");
TweenMax.fromTo(el, 0.5, 
  this.state.enter, 
  this.state.neutral
);


///////////////////////////////////////////////////////////////////////
// OUTPUTS:
// GOOD - output of the tween when parsed will be proper syntax
TweenMax.fromTo(el, 0.5, 
  {
    yPercent: 25,
    xPercent: 25,
    alpha: 0,
    skewX: -10
  }, 
  {
    yPercent: 0,
    xPercent: 0,
    alpha: 1,
    skewX: 0,
    ease: Expo.easeOut // ease is included in the neutral object
  }
);

 

Otherwise your code would look like this which is malformed syntax

 

// this will not work
this.state = {
  enter: {
    yPercent: 25,
    xPercent: 25,
    alpha: 0,
    skewX: -10
  },
  neutral: {
    yPercent: 0,
    xPercent: 0,
    alpha: 1,
    skewX: 0
  },
  leave: {
    yPercent: -25,
    xPercent: -25,
    alpha: 0,
    skewX: 10
  }
}

TweenMax.fromTo(el, 0.5, {
  this.state.enter
}, {
  this.state.neutral,
  ease: Expo.easeOut
})


///////////////////////////////////////////////////////////////////////
// OUTPUTS:
// BAD - output of the tween when parsed will be malformed syntax
TweenMax.fromTo(el, 0.5, {
  { // extra squiggly brace - malformed
    yPercent: 25,
    xPercent: 25,
    alpha: 0,
    skewX: -10
  } // extra squiggly brace - malformed
}, {
  { // extra squiggly brace - malformed
    yPercent: 0,
    xPercent: 0,
    alpha: 1,
    skewX: 0
  }, // extra squiggly brace - malformed
  ease: Expo.easeOut
})

 

Example of javascript object literal in a for loop with GSAP

 

See the Pen Croyi by jonathan (@jonathan) on CodePen

 

Happy Tweening!