Is it possible to 'wrap' property IDs?

[elegantseagulls]

I'm trying to stagger tween several CSS Custom properties, and was wondering if it's possible to do this without breaking it into several .to() tweens. eg: gsap.to('body', {gsap.utils.wrap(['--bg-1','--bg-2']): 'blue', stagger: .1 })

 

CodePen has desired result commented out, for clarity.

See the Pen MWooPPP?editors=0110 by ryan_labar (@ryan_labar) on CodePen

[_Greg _]

You can use keyframes like:

gsap.to('body', {
  keyframes: [
    {
      '--bg-1': 'blue',
      duration: 0.2
    },
    {
      '--bg-2': 'blue',
      duration: 0.3
    }
  ]
})

About stagger i'm not sure

 

Also you can set duration by defaults like 

gsap.defaults({duration: 0.2});

gsap.to('body', {
  keyframes: [
    {
      '--bg-1': 'blue',
    },
    {
      '--bg-2': 'blue',
    }
  ]
})

 

[OSUblake]

Stagger is meant to work on different targets, not properties.

 

Your best bet might be to make a function to do that. You could still use a wrap function for the property like so.

gsap.to('body', {
  [wrap()]: 'blue', stagger: .1
})

 

[elegantseagulls]

@_Greg _,

Yeah, I thought about keyframes, but was really looking to use the power of stagger for this, as there are more than just two custom properties, and was looking to possibly distribute that stagger on an ease curve.

 

@OSUblake That may work! Yeah, I may have to get a bit creative with this one. Was trying to use CSS custom properties to avoid some conflicting tween/timeline issues.

[GreenSock]

Here's a helper function that may prove useful:

function staggerProps(targets, vars) {
  let tl = gsap.timeline(),
      stagger = (vars.stagger || 0.1),
      nonStaggeredVars = {},
      props = [],
      values = [];
  for (let p in vars) {
    if (~p.indexOf(",")) {
      props.push(p.split(","));
      values.push(gsap.utils.wrap(typeof(vars[p]) === "string" ? [vars[p]] : gsap.utils.toArray(vars[p])));
    } else if (p !== "stagger") {
      nonStaggeredVars[p] = vars[p];
    }
  }
  props.forEach((a, i) => {
    let getValue = values[i];
    a.forEach((p, i) => tl.to(targets, {[p]: getValue(i), ...nonStaggeredVars}, i * stagger));
  });
  return tl;
}

That way, you can use it like a gsap.to() but it'll return a timeline with things staggered. Just use a comma-delimited list of property names as the property name of the vars object like this: 

staggerProps("body", {"--bg-1,--bg-2": "blue", stagger: 0.5, duration: 1});

It also lets you define multiple end values in an Array if you need that, and you can do multiple sets of variables too: 

staggerProps("body", {
  "--bg-1,--bg-2": "blue", // single value
  "--other-1,--other-2": [100,200], // Array of values
  stagger: 0.5, 
  duration: 1
});

See the Pen VwWWOwO?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Is that what you were looking for @elegantseagulls? 

[elegantseagulls]

29 minutes ago, GreenSock said:

Is that what you were looking for @elegantseagulls? 

Above and beyond!