jstafford

Thanks Carl. I will give that a try and see what it looks like.

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.

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?

created a vue 2 demo, but this works fine in codpen. I can't figure out why the bottom bar is disappearing in my local : |

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 }

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?

Hi, I was trying to analyze why this Split Text seems to shake in chrome. This is from the SplitText Collection in Codepen for GSAP. Why is this?

Thanks Jim. Sorry for late response.

addToController above was the mistake. Again, my setup is good.

Hi Blake, I just got it working. My problem was using the addTCintroller (controller) method. There is no such method. It is addTo (controller). Silly mistake. It was not a setup issue. I like Vue 2. I am not using Typescript, but plan on implementing when it has a more full buy in like Angular 2 (documented, etc.) .

I have been trying to setup gsap with scrollmagic and webpack 2 and running into difficulties. I am reaching out here b/c scrollmagic uses gsap and is poppular here. Also, I know weback 2 is popular for a few different front end frameworks now. I am using Vue. Here is my stackoverflow summarizing my problem. https://stackoverflow.com/questions/44229694/webpack-2-not-loading-scrollmagic-and-gsap-imports-correctly-uncaught-typeerror I just don't know how to resolve it, but I would really like to use scrollmagic and gsap together. Thanks. John

I need to go watch Wargames.

You switched over to Observables with TypeScript in Angular 2 yet Blake?

http://codepen.io/jstafford/pen/JXQBrO ; interesting thing is now that I am using the canvas shim, it normalizes the behavior across all browsers. the B being a little further away from the F and red middle part of the logo was easily fixed with a greensock change in x in my animation. Wow, this canvas technique really worked for me. I know ie 11 is less than 6% of the browsers right now, but I feel much better now.

http://codepen.io/jstafford/pen/RazJXM ; this is using the canvas shim . almost perfect. The B is not responding as well as the others though