[SVG Path Disappearing]

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

[SVG Path Disappearing]

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.

[SVG Path Disappearing]

 

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? 

[SVG Path Disappearing]

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

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 : |  

[SVG Path Disappearing]

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
}

[SVG Path Disappearing]

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

[Split text shaking during animation]

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?

See the Pen waCoe by GreenSock (@GreenSock) on CodePen

[Scrollmagic Setup in Webpack 2]

Thanks Jim. Sorry for late response.

 

[Scrollmagic Setup in Webpack 2]

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

[Scrollmagic Setup in Webpack 2]

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

[Scrollmagic Setup in Webpack 2]

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

[Number animation]

I need to go watch Wargames.

[Using TweenMax together with Websockets]

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

[IE 11 Inconsistencies in Animation]

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

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

[IE 11 Inconsistencies in Animation]

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

; this is using the canvas shim . almost perfect. The B is not responding as well as the others though

[IE 11 Inconsistencies in Animation]

Thanks guys. I appreciate your help and suggestions. I was fairly sure I was not dealing with GSAP issue as well, but wasn't convinced that I was dealing with an svg scaling in ie11 problem either. I didn't know if there was something that GSAP could offer that could alleviate this. I think this is a scaling problem now in ie that seems to involve aspect ratio. I had already tried the width: 100%, display: block, and a lot of configurations of preserveAspectRatio (xMidYMid, xMaxYMax, meet, slice, etc.) with no success. 

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

. This codepen shows width: 100%, max-width: 100%, and display: block using the svg css selector with no success. The preserveAspectRatio configurations work at some widths and not others. I haven't tried the canvas technique yet, but was hoping for a css fix. I will keep plugging away at this.

[IE 11 Inconsistencies in Animation]

Hi Greensock Community,

 

I have been working on an intro animation that runs fine on chrome and firefox. I tested in IE11 and have been plauged with what seems to be inconsistencies in the rendering of aspect ratios of my svgs when the width of the slideshow is greater than 1200 px wide. It is really strange, I don't know how to tackle it but it seems to me that IE11 is tinkering with the aspect ratio when going to bigger width device. Can greensock help with this or are there other tricks I can use to get rid of this? Any help greatly appreciated.

 

John

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

[Jerkiness on Progress Bar with intra timeline Image Transitions]

thanks guys. let me digest these answers and reply later. 

[Jerkiness on Progress Bar with intra timeline Image Transitions]

Hi Jack.

 

You can see slight hiccups in between slides if you look closely at the progress bar. It is present to a greater degree on my local example that I can't put on codepen. No reason why I am using onUpdate. I was using this as an example. http://greensock.com/forums/topic/10484-get-progress-of-a-child-timeline-and-master-timeline/ ; Could this be the source of the problem? Trying to figure out how to tie the scaleX progress with progress bar when I create the timeline and not having much luck.

[Jerkiness on Progress Bar with intra timeline Image Transitions]

Hi,

 

While this problem is much diminished in this codepen, it is still present if you look closely. It doesn't happen all the time , but when it does , there is a slight stop and then the progress bar begins again while the images transition to another. This is not present in the states with only one image (the progress bar goes across with no slight interruptions). I am working on a much bigger banner slider (20 states with 7 or 8 that have these multiple intra-transitions). It is present to a greater degree. I am trying to figure out how to get rid of it. Any ideas?

 

Thanks.

 

John

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

[Not able to animate with DrawSVG in timeline (Angular involved, not the issue)]

Wow Blake! Thank you so much.

 

I need to study up on your solution, but most everything is fairly familiar looking to me.

 

John

[Not able to animate with DrawSVG in timeline (Angular involved, not the issue)]

Hi,

 

I almost always ask Blake directly when I have anything angular in my animations, but I don't think this is my problem. My angular seems to be working with no issues.

 

Here is my base animation that I wanted to incorporate.

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

into

 

here: 

 

So, when you click on any circle, it triggers an active class to be set on it, that then is picked up by my ngAnimate class where if active  class was added, the drawSVG draws out an empty circle, and the previous active class is removed and it goes to a solid circle. I have degugged through it all , but when it gets to my timeline containing drawSVG, it just doesn't do anything. Fairly sure, I am missing something in the way I am approaching my greensock here.

 

 

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

[Morph SVG , Namespace problem?]

Thanks PointC. I am searching but haven't seen any codepen that shows me how to marry up a point on one shape with another point on another shape.Like, how is this working?,

See the Pen LpxOqR by GreenSock (@GreenSock) on CodePen

[Morph SVG , Namespace problem?]

thanks PointC. no wonder I was getting that message.

 

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

 

I did a little work but I am not happy with the asymmetrical morph here. Any way to fix this or ensure that it morphs symmetrically?

[Morph SVG , Namespace problem?]

Hi greensock community,

 

Its been a long time since I have used Morph SVG plugin. Anyway, originally I was getting the "convert to path" error even though I had no shapes and everything was in path already. When I use the "MorphSVGPlugin.convertToPath" it throws a namespace error after that. Not sure what I am missing.

 

John

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