.thumb.jpg.45ad1f0654d8c8cd759c47599fe1796d.jpg)
Targeting/Animating DOM nodes using CSS selectors VS passing elements directly
Hi Team,
Within the virtual DOM environment (Vue, React, etc), what's the difference between targeting/tweening an element using a ref vs selecting via css selector string (performance, known quirks/bugs)? I've been targeting/animating virtual DOM elements using css selectors, but just came across the "Getting Started: React and GSAP Animations" and see that using refs is advised. Perhaps I'm veering too far away from a GSAP specific question at this point, and if that's the case, un
You're not targeting the virtual DOM elements because you really don't have access to the virtual DOM. You're targeting real DOM elements, and you probably shouldn't being using CSS selectors.
The reason should be obvious regardless of what library/framework you're using. It's all about locality. Passing in a CSS selector to GSAP runs document.querySelectorAll(), so it's going to search the entire DOM for matching elements. That will cause problems if you use a component more than on
