Jump to content
Search Community

SVG Plugin Demonstrating Weird Behavior when animations play in navigation bar

jstafford test
Moderator Tag

Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

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

 

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

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

Link to comment
Share on other sites

  • Solution

You can't do that AJAX like that. You're just inserting the entire document, HTML and all. If you want to do AJAX, use Plunker since it has a file system and you don't have to worry about cross domain issues. You also don't need that window on load. That's just going to delay when the loading starts.

 

The problem is your timelines are overwriting properties if you do it too fast. You need to either make sure your timelines are not active, or create new timelines. I just set the hover timeline progress to 1 to show you it works.

 

See the Pen JGNKKX?editors=001 by osublake (@osublake) on CodePen

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

I simulated the AJAX callback by calling init directly on line 30, so the behavior is going to be same.

 

Maybe I confused you by using the name hover. Look at line 48. I still call the line I commented out. Now look at line 152. I'm returning the timeline created in that function. I did that so that I could access the hover timeline inside the click event. The name "hover" I used for the var has no meaning and does not refer to an actual hover event. You could name it whatever.

 

The real issue here is how to deal with animation when it is interrupted. I just set the interrupted (hover) animation's progress to 1 because I didn't know the behavior that you were expecting. For example, what happens when you click on link and the hover animation is only half way through playing? Should the hover animation continue playing and then play the click animation when it's done? Or should the click animation start playing immediately and overwrite the hover animation. There's a lot of different scenarios you need to consider. 

  • Like 2
Link to comment
Share on other sites

I'd agree 100% with Blake especially about all the scenarios that could happen here.

 

If you truly want suggestions, my first would be to simplify everything. With two different timelines on each button fighting over control of the same elements with a hover or click, this can cause headaches pretty quickly. I'm also not a fan of adding and removing classes. The more complex, we make our code and animations, the harder it is to plan for all scenarios and debug.

 

Personally, I'm confused as to why the background lights up red on click and then can be turned off again. These are nav links, right? I would then assume when I click one, I'm headed to a new page so why does that need to stay on? You can certainly have the nice hover animation along with another event on click and then send the user to a new page.

 

I set up a pen to show how this could work for you with the same effect, but much less code and problems. I have the same type of hover and it can be interrupted by a click at which time I use the set() method to change the color and scale of the background. For this demo, I also added a mouseup to remove that color, but in the wild, you probably wouldn't need it as you'd be sending the user to a new page anyway.

 

See the Pen WrjzOa by PointC (@PointC) on CodePen

 

My personal design/development style and opinion is keep everything as simple as possible while still having a pleasing aesthetic. Always be thinking of the user experience first.

 

Good luck.

  • Like 2
Link to comment
Share on other sites

Great example PointC!

 

Here's something to think about. If it's about the user experience, why would you want to load up another page when you click on a link? Wouldn't it be better if the new page just transitioned in? That's pretty much how I've been it for the past couple of years. Here's a simple example, but it never has to load up a new page. Hook it up to Firebase, and you don't even need a server.

 

See the Pen b2cbb2dd2124e04d816f517ff561e1d4?editors=001 by osublake (@osublake) on CodePen

  • Like 2
Link to comment
Share on other sites

You guys are awesome. Thank you PointC and Blake. This is a lot to chew on. I will be working through this for weekend learning.

 

PointC , while I am trying to keep my svg code seperate from html and relying on ajax to load my svg, your simple design is very much appreciated! One timeline sounds a lot better with fewer headaches. I am very much an imitator of design at this point and very much in need of people like you and Blake with more experience in writing this stuff.

 

I was originally a Java developer who is at the moment learning and wiring a angular js front end to a REST Java Spring framework back end. Thanks for this example Blake. I use Tomcat as my local server during development but will definately try this angular page ushering setup.

  • Like 2
Link to comment
Share on other sites

And yes Blake, I did miss the hover object you returned in my rewritten hover function before PointC's one timeline clean and simple example. I understand now, but think PointC's scrap of my 2 timeline overcomplicated design makes a lot of sense. I'll keep you guys posted.

Link to comment
Share on other sites

Haha! The entire time I've been explaining this stuff to you, I'm thinking to myself that this would be so much easier to do in Angular.

 

Check this out. Here's a simple way to inject an SVG in Angular 1.5 using the new component method.

var mySvg = {
  templateUrl: function($element, $attrs) {
    return $attrs.src;
  }
};

angular
  .module("app", [])
  .component("mySvg", mySvg);

And now you can use it in your HTML like this...

<my-svg src="something.svg"></my-svg>

Here's a great article by Todd Motto about using components.

https://toddmotto.com/exploring-the-angular-1-5-component-method/

 

Here's an older demo I made that does essentially the same thing, but as a directive.

http://plnkr.co/edit/SNdgqm?p=preview

 

For the routing, I like use ui-router instead of Angular's router. It allows you to have multiple views and it's based on states instead of URL routes.

https://github.com/angular-ui/ui-router

 

Here's a demo of how to use animations with ui-router.

http://plnkr.co/edit/gDtuKf?p=preview

 

And if you're a Java developer, learning JavaScript can be hard. I had the same problem coming from C#. You might want to check out TypeScript as it borrows a lot from those languages. It adds stuff like interfaces, enums, generics, abstract classes, and best of all, type checking, which shows you errors at design time and provides auto completetion. That's what Angular2 is written in. It does make developing stuff easier.

http://www.typescriptlang.org/

 

  • Like 1
Link to comment
Share on other sites

If it's about the user experience, why would you want to load up another page when you click on a link? Wouldn't it be better if the new page just transitioned in?

Oh - you wouldn't have to convince me that would be a better user experience. I love that demo you've got there. :)

 

The one obstacle in the way of that approach for us is our Internet overlord:Google. We're a complete service agency so we're also responsible for traffic and rankings for our clients. Google has always been a bit wonky when it comes to their ability to access externally loaded content and even when they can get to it, they don't always place the same weight on it as content that's front and center on the site. For now, a multi-page, content rich site is still the first building block for quality SEO.

 

You'll notice I said to think of the user experience first, but sometimes that's at odds with Google's best practices and my client's goals. Of course, the client's goal is usually: "I need to rank #1 for the generic term widgets by next Monday. Can we do that?"  :D

 

Anyway, that's a discussion for another time and another forum.  

  • Like 1
Link to comment
Share on other sites

I'll just throw this out there because I always hear SEO stuff like that. Using pushState and precomposition, an AJAX site should have no problem being crawled. Using prerender.io is probably the easiest way to do this.

 

Look at this simple site using jQuery...

http://html5.gingerhost.com/london

 

Now do a search for "London's ancient core". It should be #1 in Google and #3 in Bing

  • Like 1
Link to comment
Share on other sites

This is good to know. I am relying on outside people to do my SEO, but will of course focus on optioptimizing content and images so it is optimally crawled. I have to believe the Google, Bing, and other modern search engine algorithms are sophisticated enough not to ding you for loading svgs via ajax. It sure does allow me to keep html and svg changes seperate and give me a cleaner workflow.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...