Jump to content
Search Community

SVG Path Disappearing

jstafford test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi, I am having difficulty replicating this in a way I can share on codepen. However, the referenced one that is working in codepen is very similar and working.

 

I have taken this svg morph animation and put it into a Vue application which I don't think is what is causing my problem. This has been pretty much a transplant from codpen to here. When the animation plays forward, the #open_top_bar and #open_bottom_bar cross, like they should, but for some reason the open_bottom_bar then disappears, which it shouldn't  (the open_middle_bar disappears like it should )

 

What is causing this behavior?

See the Pen amraQg by jstafford (@jstafford) on CodePen

Link to comment
Share on other sites

Just so you know how I am calling the timeline in the Vue2 application, here it is. It is just like regular JavaScript, but I did change up the callback, and just stored the timelineOpenCloseMenu as a data attribute that is just like a global variable for Vue2. Nothing crazy here. I just don't understand why the open_bottom_bar path is disappearing.

 

initMobileNavigation: function() {
    this.timelineOpenCloseMenu = new TimelineMax({paused: true})
    this.timelineOpenCloseMenu.to("#open_middle_bar", 1, {autoAlpha: 0, ease: Elastic.easeInOut}, 0)
    this.timelineOpenCloseMenu.to("#open_top_bar", 1, {morphSVG:"#close_top_bar", ease: Elastic.easeInOut},0)
    this.timelineOpenCloseMenu.to("#open_bottom_bar", 1, {morphSVG:"#close_bottom_bar", ease: Elastic.easeInOut}, 0)
}

clickOpenCloseMobileMenu: function() {

    if(!this.sidebar) this.timelineOpenCloseMenu.play()
    else this.timelineOpenCloseMenu.reverse()

    this.sidebar = !this.sidebar
}
Link to comment
Share on other sites

I looked over your demo and the code doesn't look like anything that would be cause for concern (from what I can tell). Very difficult to trouble-shoot with it working so nicely ;)

 

Unfortunately, I just don't know enough about vue to be able to discuss it or its impact on GSAP animations in any intelligent way, I just know I've heard some nice success stories with the two.

 

Wish I could be of more help here.

Link to comment
Share on other sites

4vr6o8.jpg

 

So, this is the only clue I have right now as to what is going on , both open_top_bar and open_bottom_bar have the same path data after the hamburger icon is clicked and it morphs into the cross close menu icon. It looks like both bars are morphing into the close_top_bar, but why? 

Link to comment
Share on other sites

So, the hamburger icon morphs correctly in the beginning. The open_top_bar and open_bottom_bar cross while the open_middle_bar disappears, but for some reason, the open_bottom_bar then takes on the same path data as the open_top_bar (i.e. close_top_bar) and the cross can no longer be seen. I don't know what is causing this as it seems specific to the svg itself. I confirmed copying the path data of what it was supposed to stay morphed into (close_bottom_bar) makes the cross reappear.

 

when I click the close menu icon (my one bar cross), the cross reappears again and it morphs back into the hamburger open menu icon correctly.

Link to comment
Share on other sites

Thanks for the additional info. With only the code in the working CodePen to look at, I'm not sure why that is happening.

All you are doing is playing and reversing a timeline there shouldn't be any wires being crossed with paths morphing into the wrong shapes.

 

when you build your timeline on your local, problematic build make it a repeating and yoyo-ing timeline max, will be curious to see if it can play and reverse on its own ok like:

 

this.timelineOpenCloseMenu = new TimelineMax({repeat:8, yoyo:true})

 

Just a shot in the dark.

 

 

 

 

  • 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...