Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by jstafford

  1. Hi Blake, thanks for responding to this. I knew my ajax in codepen was not right. I am so new to it and doing stuff with it in codepen, I knew I needed help with that part. I will use plunker in the future for demonstrating problems where I am concerned with external reference loading (i.e. ajax stuff). Thank you. In my javascript code, I am logically taking the steps to find out if the .navLink parent has the active class or not. Not sure what else I can do here. My active and hover timelines overwriting each others' properties makes complete sense now. Taking the necessary steps to put the hover timeline at a certain point when the click happens is not something I hadn't considered. However, you commenting out the "navLinkHover($(this))" line in codpen still allows the hover effect to work in codepen (not sure exactly why), but I still have to have this callback in my local to expect this ajax loaded svg to respond to the hover function. That being said, if I leave the "navLinkHover($(this))" line uncommented out in the init function, I get the weird behavior in codpen that I see on my local. http://codepen.io/jstafford/pen/EPmXya How can I expect to callback the hover and active functions and not get the weird behavior? Also, the line "hover.progress(1)" is a little "automagic" to me. You are using the hover event inside the click function to call a greensock progress timeline object in the hover function? How does this work? Are their others that would work better (killing the hover timeline or using "hover.pause(0, true) )?
  2. Well, crud. Just realized the images didn't take. Here is a link to my images on imgur http://imgur.com/K3WnrET
  3. First of all, to demonstrate my problem faithfully, I included all crucial elements in the codpen. There is the navbar html and svg elements that are inserted via ajax. If it looks like a lot, it really is the 5 svg's I included in the HTML portion of the codpen. Please hang with me on this one. This is a really hard one for me, because I have been building this animation up over several days only to get here and notice a problem with all the hover and active states playing together nicely. I am testing this just like a normal person would hovering and clicking through the navigation links and the animation will hang sometimes. I can't even recreate it consistently to study the problem. I am hoping that there is some greensock unspoken way of doing things that I am ingnoring here, b/c I have invested a lot of time in this effect and really want to pull it off. Below is a codpen of a simple hover (not including the transition to active when clicked). http://codepen.io/jstafford/pen/WroLZO MY FIRST STEP: If anyone could help me load this with the ajax I have included in the codpen so that the svgs are seen in the navigation bar horizontally, that would be the first step to helping me recreate this problem not excluding the possibility of ajax and asynchronous stuff being the issue. I hope its not, but I just changed from loading things via object tag to Blake's ajax recommendation for my external svgs. I will try loading things differently, but I don't think its the problem. Second, I have included some attached screenshots to give you an idea of what I am dealing with when I say "weird behavior". Image8 --> shows you the active state of the claims icons, while the remaining four are not hovered or active. Image 10 --> shows financial products in the active state, while claims is hovered; rest are unhovered and not active Image 12 --> example of the "WEIRD BEHAVIOR" --> THE LAST ONE CONTACT HAS THE RECTANGLE BLACKED OUT LIKE IT IS IN A SEMI-HOVER STATE, BUT IT IS NOT BEING HOVERED; achieved this after cycling through navlinks hovering and clicking for about 15 seconds
  4. Just got the debugging working on the plunker link I provided above and I am definately getting inside mouseenter and mouseleave functions of the HoverSvgState Prototype object. Again, nothing happens though... I only have one svg here, and they are sharing the same timeline object. Not sure what is going on here.
  5. Ahhh! I like this callback function stuff much better. I was toying around with using Prototype to encapsulate the toggle functions and the timeline state. Haven't quite got it. Excuse my svg injector here (by iconic; I will substitute above soon) , but here is the plunker. https://plnkr.co/edit/YUbtyZcyEI6AalD0UqUY?p=preview . I can't debug on plunker , but on my local, I am tripping breakpoints inside the mouseenter and mouseleave function, but nothing happens. I think this would be a really slick way to bundles the state of the timeline with functions that animate it backwards and forwards. Any help appreciated. John
  6. yes, not having the callback was my problem.
  7. https://toddmotto.com/hacking-svg-traversing-with-ease-addclass-removeclass-toggleclass-functions/
  8. Hmm... my class="link" at the svg tag level (eg. $(".link").each(createNavLinkHoverAnim) ) works in codepen, but not my local ; see this http://codepen.io/jstafford/pen/WroLZO I do not trigger a hover event when moving my cursor over the ajax loaded link. I see it in my DOM, but it doesn't register. I am afraid I am dealing with something like this http://stackoverflow.com/questions/3294553/jquery-selector-svg-incompatible ; svg.className.baseVal Weird thing is that the classes and line and rect within the svg tag select just fine.
  9. You are triggering the creation of a seperate TimelineMax object for each hover. Wow, I didn't see this at all. Thanks Point C.
  10. oh, wait. that was inter-discussion between PointC and Carl. Still hoping for my miracle.
  11. Pre-New Years Eve miracle. Ha! Just saw this. Funny. It is a borderline miracle that still needs some help from the miracle workers.
  12. Okay, you are correct. I verified it with my own pen . http://codepen.io/jstafford/pen/jWVQGb However, this is part of a navbar where this effect has to be made generic. I would like to define it generically so that if any link is hovered then it fires an event respective to what triggered the hover. Why does this not work? I verified that the jquery selector outputs the rect, line, and paths for each navigation link correctly when hovered, but TimelineMax fails to act upon it when I use $(this) --> http://codepen.io/jstafford/pen/Rroqed
  13. whoops, just posted this right as you guys were writing your posts above
  14. http://codepen.io/jstafford/pen/jWVQGb ; here is another codepen I am playing with to find my problem. Background is behind the home with text icon and it is easier to see what is going on. Still nothing. The console is logging that my jquery selector for line, rect, and icon and text paths are all selecting appropriately, but the TimelineMax object does nothing.
  15. Here's a working version, http://codepen.io/jstafford/pen/rxMEaj ; but http://codepen.io/jstafford/pen/LGbgaL isn't working? Can anyone help me out? It is getting inside the tl.play function; verified that with alert. My problem from earlier was that the rect and line didn't have styling attributes, but this is different.
  16. Dang, that was it Carl. I coded the svg rectangle and lines in an editor instead of manually drawing and exporting from Illustrator for precision sake. I forgot the styling attributes. Thanks.
  17. Well, I spent all day yesterday debugging this problem and no solution. : / PointC got me started adapting a Tympanus tutorial hover effect and my further work on this can be seen here: http://codepen.io/jstafford/pen/rxMEaj . This works and it is the effect I want, but integrating this into my navbar setup is proving problematic, and I am stumped as to why. http://codepen.io/jstafford/pen/MKbqgE/ --> This is a reduced example of my setup and it is showing the same problems I have locally. As you see, this effect is going to be part of my navbar, but the TimelineMax is not working at all. For kicks, I swapped out the tlDesktopLinkHover.play() in the desktopLinkOnMouseenter function with TweenMax.to($(this).find($("#desktopLinkHomeIconTextLayer").find("path")), 1, {fill:"#ffffff"}) and behold, IT WORKS! I thought that loading the SVG into my DOM was the difference since the working codpen example http://codepen.io/jstafford/pen/rxMEaj is just inline SVG pasted in (not injected into my DOM with ajax like I am doing), but I am even seeing the same issues as I am locally in this codpen example http://codepen.io/jstafford/pen/MKbqgE that is a mockup of my navbar setup. What am I missing?
  18. Hi Blake, just wanted you to know that Todd Motto's way (img src) is still referencing the svg as an external document and it is not part of the DOM. His modernizr jquery script is nice and I may use it for png stuff and ie8, but your jquery ajax load way allowed me to gain access to the id and classes within the SVG itself without having to do the additional awkward fetches (getSvgDocument, then getId or getClass, etc.) after including the svg in an object data or img src tag . You are the genius sir. Thanks again.
  19. Not sure if this is ajax. JQuery solution. Thank you for taking the time to reply to my question. I was dependent on the object tag and it was causing headaches for me because it was an external resource not in the DOM.
  20. Hi Blake, yes I saw this. Your experience with ajax for loading inline svg made me side with this article,https://toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script/
  21. Don't use ajax a lot, but loading the svg at runtime is what I need.
  22. I was trying to adapt Carl's dash chaser to pull this off http://tympanus.net/Tutorials/BorderAnimationSVG/ . I am having little success. Is there anyone that could help me out with this? I will put it out there that adapting the three paths of Carl's chaser dash animation to this problem is confusing to me. I felt to pull this off, I would need an offset of 1, but in the codedrops demo they are using a border line that is 3x the length of any border with a dash offset equal to the border length. They simply translate the line and the offset makes it look like the border is animating within the viewbox.
  23. I prefer not to paste inline svgs into my code. I have been using external references to pull in my svg and let greensock animate with the object tags like so: <object type="image/svg+xml" id="example-id" data="path-to-svg/example.svg> </object> I was then fetching the specific elements within the svg to animate but this has become very cumbersome. function getNavSvgEl(elId, className) { var svgDoc = document.getElementById(elId).getSVGDocument(); return svgDoc.getElementsByClassName(className); } I have been playing around with grunticon as a way to embed svgs inline to get the advantges of having inline SVG in my DOM without having to do the awkward fetch function above. With initial tests, Greensock seems to be able to animate these embedded svgs as if they are inline. Has anyone had experience with this that could offer any advice before I get to far along and realize too late? Has anyone had problems with Grunticon in a GSAP animate workflow?