Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

Posts posted by jstafford

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

  2. 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? 

  3. 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
  4. 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

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

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





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

    • Like 1
  8. 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.

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



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

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

  11. 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?





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

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





    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

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



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