Tween target as selector vs element: different results but should be the same?

[DoneBySimon]

According to the docs (parameters -> targets) it should be possible to target an object for a gsap.to() via a querySelector or via a reference to an element.

 

I'm experiencing different outcomes though. As you can see in the codepen the horizontal scroll behaves differently by using the ".card" syntax (seems ok) than with the cards.forEach(card =>... method (definitely not ok)

 

What's happening? Am I missing something here? 

See the Pen qBadLmv by simonvanherweghe (@simonvanherweghe) on CodePen

[ZachSaucier]

Hey Simon and welcome to the GreenSock forums.

 

The difference between the two approaches in your demo is that in the first approach (".card") you're selecting a node list of elements as the target for a single tween. In the second approach, you're creating a tween for each .card element and then sequencing them in a timeline. See the difference?

 

The equivalent of the first approach using an array of element references instead of a selector string would be to simply pass in the array that you have like so:

tl.to(cards, {
  xPercent: -100 * (cards.length - 1),
  ease: "none",
});

 

[DoneBySimon]

Tanks for the welcome, amazing library (and community, and support!)

 

I mistakenly assumed that GSAP did a toArray under the hood with a selector like that. I see the difference, thanks.

 

I have some follow-up questions, but to keep things on topic, I've posted them in an other thread

 

[GreenSock]

4 hours ago, DoneBySimon said:

I mistakenly assumed that GSAP did a toArray under the hood with a selector like that.

Yes, that's exactly what GSAP does under the hood - when you use selector text as the target, it uses toArray() internally. But there's a big difference between creating one tween that animates a bunch of items simultaneously versus sequencing them one-after-the-other. See what I mean?