back morph started with click

[mindthegap]

i'm experimenting with the morph plugin.

if I want to start the morph within a vuejs component by clicking on the svg, it works.

with another click I would like to morph back, but I get my console output, but I don't see anything.

 

 

on the acg I have

@click="doAnim"

 

in the mounted I hide the unused paths

    gsap.set("#fill2", {visibility:"hidden"})
    gsap.set("#outline2", {visibility:"hidden"})

    

  onlike clickable when no animation runs
    

doAnim: function(){
          console.log("doAnim")
          if (this.animState == 1){
              this.anim2();
          } else if (this.animState == 2){
              this.anim1();
          }
      },

and the functions to start the morph, I already tried to switch the visibility of the paths. Is there an morph object I have to put in an variable and operate on this.
      

anim1: function(){
          console.log("anim1")
          this.animState= 0;
          gsap.to("#outline1", {morphSVG:"#outline2", duration: 1.5, delay: 0.5, onComplete: this.anim1End});
          gsap.to("#fill1", {morphSVG:"#fill2", duration: 1.5, delay: 0.5,});
         
      },
      anim2: function(){
          console.log("anim2")
          this.animState= 0;
          gsap.to("#outline2", {morphSVG:"#outline1", duration: 1.5, delay: 0.5, onComplete: this.anim2End});
          gsap.to("#fill2", {morphSVG:"#fill1", duration: 1.5, delay: 0.5, yoyo:true});
      },

 

 

 

[mindthegap]

ok, I switch to Timeline, and now I can trigger the morphs and fades easy with fromto() great!

 

but how can I capsulate the timelines or elements in one vuejs component, when I use the same component a few times on the page?

 

when I select an ID or class,  it is multiple times inside the dom, how can I prevent this? How can I select only childrens of the component?

 

this.tl.to("#outline1", {morphSVG:"#outline2", duration: 1.5, delay: 0.0, onComplete: this.animEnd}, 0.5 );

[ZachSaucier]

A few notes:

• I'd probably use a single timeline outside of your event listeners/callbacks and and use control methods inside of your callbacks (like .play() and .reverse()). This is one of the keys to animating efficiently (I highly recommend the whole article).
• You shouldn't have multiple elements with the same ID on your page. That's invalid. Instead you should use classes.
• To have multiple instances of this on your page you should make use of Vue's refs.

[mindthegap]

57 minutes ago, ZachSaucier said:

A few notes:

• I'd probably use a single timeline outside of your event listeners/callbacks and and use control methods inside of your callbacks (like .play() and .reverse()). This is one of the keys to animating efficiently (I highly recommend the whole article).
• You shouldn't have multiple elements with the same ID on your page. That's invalid. Instead you should use classes.

yes, that's right,

• To have multiple instances of this on your page you should make use of Vue's refs.

I can use multiple components, the problem is that with this.tl.to(".outline1",  greensocket selects all path with the call "outline1" how can I select only the class in the component.

 

[ZachSaucier]

1 hour ago, mindthegap said:

I can use multiple components, the problem is that with this.tl.to(".outline1",  greensocket selects all path with the call "outline1" how can I select only the class in the component.

I would use a ref  

 

The only alternative is if you have some reference to a parent of your elements that you're wanting (like a DOM reference to the outermost element of your component) then you use .querySelector() on that DOM reference. 

[mindthegap]

1 hour ago, ZachSaucier said:

I would use a ref  

ok, means I send via prop a refname to the component, and then I use this refname to select my classes

 

 

1 hour ago, ZachSaucier said:

 

 

The only alternative is if you have some reference to a parent of your elements that you're wanting (like a DOM reference to the outermost element of your component) then you use .querySelector() on that DOM reference. 

Ok, I can select with classic queryselectors my element and then use this in the timeline?

 

 

[ZachSaucier]

29 minutes ago, mindthegap said:

I can select with classic queryselectors my element and then use this in the timeline?

Yep. Your target can be a DOM element, a nodeList, a jQuery object, a selector string, or an array of any of the ones listed previously.