mindthegap Posted January 26, 2021 Share Posted January 26, 2021 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}); }, Link to comment Share on other sites More sharing options...
mindthegap Posted January 26, 2021 Author Share Posted January 26, 2021 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 ); Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 26, 2021 Share Posted January 26, 2021 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. 1 Link to comment Share on other sites More sharing options...
mindthegap Posted January 26, 2021 Author Share Posted January 26, 2021 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. Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 26, 2021 Share Posted January 26, 2021 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. Link to comment Share on other sites More sharing options...
mindthegap Posted January 26, 2021 Author Share Posted January 26, 2021 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? Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 26, 2021 Share Posted January 26, 2021 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now