Jump to content

Johan ⚡️ Nerdmanship

Error when referencing object in array as param of .set method

Recommended Posts

This looks so simple but I just can't figure out what the problem is.


I'm creating a bezierPlugin demo and use an array of point objects both to define the bezier path and to distribute visual guides.


TweenMax throws an error `invalid css tween value: [object Object]` like the objects aren't valid, but everything looks fine to me.


The loop and pen works fine with any hardcoded object such as `{ x: 100, y: 100 }`.

Why is the referenced object invalid in the `TweenMax.set()`?


// Create dots and distribute them along the bezier path
for (var i=0; i<6; i++) {
  var blueDot = new Dot(container);
  blueDot.target.className = "blue-dot";
  //TweenMax.set(blueDot.target, pointObjects[i]);
  console.log(pointObjects[i]); // Looks like a valid object to me

Un-comment line 38 and see it break.

Many thanks!

See the Pen vZjGEO by nerdmanship (@nerdmanship) on CodePen

Link to comment
Share on other sites

Remember that technically, when you set/animate css properties, they must leverage CSSPlugin and wrapped in a css:{} object so that GSAP understands where to funnel that stuff. Years ago, since it was so common for people to animate CSS properties, we added convenience behavior to the core that checks to see if the target is a DOM element, and if so, it'll automatically do that wrapping for you on your object. In other words, if you pass in an object like this: 

{x:100, y:200}

GSAP will convert that to: 

{css:{x:100, y:200}}

It does that on the original object for performance and memory reasons. 


So in your demo, you're trying to re-use the same objects over and over again which is typically fine, but in this case you're feeding them into a bezier tween as well which doesn't expect that type of formatting. In other words: 

bezier:[{css:{x:100, y:200}}, {css:{x:300, y:100}}, ...]
bezier:[{x:100, y:200}, {x:300, y:100}, ...]


The solution is to just use fresh objects in your set() call in your loop:

TweenMax.set(blueDot.target, {x:pointObjects[i].x, y:pointObjects[i].y});


Here's a fork: 

See the Pen 549487a64db96612f201de2522e9dd59 by GreenSock (@GreenSock) on CodePen



  • Like 4
Link to comment
Share on other sites

Ah perfect – thanks a lot, Jack!


And by including a css wrapper GSAP won't change the objects, I presume.

  TweenMax.set(blueDot.target, { css:pointObjects[i] });


Link to comment
Share on other sites

Exactamundo, that's a good solution.

  • Like 1
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.