Jump to content
GreenSock

jesper.landberg

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

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

Link to comment
Share on other sites

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! :)

 

 

  • Like 4
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.
×