Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Johan ⚡️ Nerdmanship

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

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

Share this post


Link to post
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 549487a64db96612f201de2522e9dd59 by GreenSock (@GreenSock) on CodePen

 

Better?

  • Like 4

Share this post


Link to post
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] });

 

Share this post


Link to post
Share on other sites

Exactamundo, that's a good solution.

  • Like 1

Share this post


Link to post
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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×