Jump to content
Search Community

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

Johan ⚡️ Nerdmanship test
Moderator Tag

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

//bad
bezier:[{css:{x:100, y:200}}, {css:{x:300, y:100}}, ...]
//good
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 ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Better?

  • 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.
×
×
  • Create New...