jstafford

ShockinglyGreen
  • Content count

    182
  • Joined

  • Last visited

Community Reputation

23 Newbie

About jstafford

  • Rank
    Advanced Member

Recent Profile Visitors

2,820 profile views
  1. SVG Path Disappearing

    Thanks Carl. I will give that a try and see what it looks like.
  2. 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.
  3. 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?
  4. SVG Path Disappearing

    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 : |
  5. 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 }
  6. 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?
  7. 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?
  8. Scrollmagic Setup in Webpack 2

    Thanks Jim. Sorry for late response.
  9. Scrollmagic Setup in Webpack 2

    addToController above was the mistake. Again, my setup is good.
  10. 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.) .
  11. 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
  12. Number animation

    I need to go watch Wargames.
  13. Using TweenMax together with Websockets

    You switched over to Observables with TypeScript in Angular 2 yet Blake?
  14. IE 11 Inconsistencies in Animation

    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.
  15. IE 11 Inconsistencies in Animation

    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