Hi,
i have a general problem with gsap in vue, of course this would also happend in plain javascript, but i just wanted to make sure if there is maybe a workaround.
i have components in vue that contain gsap timline animations. when i do add e.g 3 times the same component to the stage, and the timeline animates the "class" named divs, it of course will not just animate the timeline the one component the timeline was called in but of course all 3 of them, since the classnames inside the components are the same.
A workaround would be to add a unique component prefix to the classes or a "scoped" attribute like there is for the css part in a component, which then generates a unigue css identifier, so for a timline animation this this would mean, that a scoped timeline in the component only animates also the divs in the component in which it was called.
is there something build into gsap already, or do i need to really prefix all timeline div animations with a unique prefix before the class names manually ?
Abstract Example what the outcome is:
HTML
<div id="component1">
<div class="title"></div>
</div>
<div id="component2">
<div class="title"></div>
</div>
<div id="component3">
<div class="title"></div>
</div>
JS
var timelineInComponent1 = new Timeline()
timeline1.to("title", {x:100})
var timelineInComponent2 = new Timeline()
timeline1.to("title", {x:100})
var timelineInComponent4 = new Timeline()
timeline1.to("title", {x:100})
each timeline is called in the component on render.
What it would cool to be
<div id="component1">
<div class="d41d8cd98f00b204e9800998ecf8427e title"></div>
</div>
<div id="component2">
<div class="bff149a0b87f5b0e00d9dd364e9ddaa0 title"></div>
</div>
<div id="component3">
<div class="b38343e9063a888e99db25cc41146c6d title"></div>
</div>
var timelineInComponent1 = new Timeline()
timeline1.to("d41d8cd98f00b204e9800998ecf8427e title", {x:100})
var timelineInComponent2 = new Timeline()
timeline1.to("bff149a0b87f5b0e00d9dd364e9ddaa0 title", {x:100})
var timelineInComponent4 = new Timeline()
timeline1.to("b38343e9063a888e99db25cc41146c6d title", {x:100})
Hope its kind of clear what i mean Thank for you replies.
