Jump to content
Search Community

component Scope timelines in vue possible?

kc@polygonrausch.de test
Moderator Tag

Go to solution Solved by kc@polygonrausch.de,

Recommended Posts

  • Solution

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.

Link to comment
Share on other sites

ok i solved this now as proposed.

 

- all my components share a mixin.

- i added an identifier vor each component on created.

- added a new data attribute that stores this

- use this data attribute to the access the unique identifier fo the html element.

<div id="d41d8cd98f00b204e9800998ecf8427e">
  <div class=" title"></div>
</div>
<div id="bff149a0b87f5b0e00d9dd364e9ddaa0">
    <div class="title"></div>
</div>
<div id="b38343e9063a888e99db25cc41146c6d">
    <div class="title"></div>
</div>
 props: {
    componentId: {
      type: Number
    }
 }
data(){
  return {
    identifier: ''
  }
}
computed:{
 getIdentifier(){
   return "#" + componentId
 }
}
created(){
   this.identifier = this.getIdentifier;
}
var timelineInComponent1 = new Timeline()
timeline1.to(`${this.identifier} .title`, {x:100})

var timelineInComponent2 = new Timeline()
timeline1.to(`${this.identifier} .title`, {x:100})

var timelineInComponent4 = new Timeline()
timeline1.to(`${this.identifier} .title`, {x:100})

 

Link to comment
Share on other sites

Hi,

 

Why don't you use refs?:

https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements

 

Is quite simple and you avoid all the hassle of creating unique classes. Also is not entirely recommended to access DOM elements in these frameworks (Vue, React, Aurelia, etc.) using regular selectors, since the DOM elements could not be mounted yet when the code runs.

 

Here is a simple example using GSAP in Vue with refs:

https://codesandbox.io/s/l261n378km?file=/src/App.vue

 

Happy Tweening!!!

  • Like 3
Link to comment
Share on other sites

Hi Rodrigo,

 

thanks for you advice. I already looked at this. Maybe i could implement parts of it with ref.
The example i used is very simple. but my application actually loads dynamic components and not all animations are directly controlled in the component itself but also from parent once.

I will sure take a look if i could refactor by using refs. But the "workaround" works quit nice with the mixin for now.

 

Stay healthy

 

best

 

Carsten

 

  • Like 1
Link to comment
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
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...