TimelineMax Problem, again...

[jstafford]

Here's a working version, 

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

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

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

[PointC]

Is there a reason you're using all those  jQuery finds?

 

You can just change the code to this and it works fine:

tlDesktopLinkHover = new TimelineMax({paused:true});
tlDesktopLinkHover.fromTo("line", .25, {drawSVG:"0% 0%"},{drawSVG:"0% 100%", ease:Linear.easeNone})
 .fromTo("line", .25, {drawSVG:"0% 100%"},{drawSVG:"100% 100%", ease:Linear.easeNone})
 .fromTo("line", .25, {drawSVG:"0% 0%"},{drawSVG:"0% 100%", ease:Linear.easeNone})
 .to("rect",.25, {fill:"#000000"});

[Carl]

use the same "line" selector as in the working version: http://codepen.io/GreenSock/pen/XXNyzg?editors=001

[Carl]

man, beaten twice by PointC in one day. 

[jstafford]

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

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

[jstafford]

whoops, just posted this right as you guys were writing your posts above

[PointC]

man, beaten twice by PointC in one day. 

It's a pre-New Years Eve miracle. 

[jstafford]

Okay, you are correct. I verified it with my own pen .

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

 

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

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

[jstafford]

Pre-New Years Eve miracle. Ha! Just saw this. Funny.

 

It is a borderline miracle that still needs some help from the miracle workers. 

[jstafford]

oh, wait. that was inter-discussion between PointC and Carl. Still hoping for my miracle.

[PointC]

If this is for a nav bar with multiple buttons, you're going to have to set up a separate timeline for each button or you'll run into troubles by getting stuck animations when you hover over and out quickly.

 

Here is a modified version of the same CodePen I showed you before, but this has three boxes all with independent timelines.

See the Pen zroMjE?editors=101 by PointC (@PointC) on CodePen

 

[jstafford]

 You are triggering the creation of a seperate TimelineMax object for each hover. Wow, I didn't see this at all. Thanks Point C.

[PointC]

You're welcome.

 

I made the same mistake not too long ago and Blake showed me the problem with stuck animations. I haven't made that mistake again.

[jstafford]

Hmm... my class="link" at the svg tag level (eg.  $(".link").each(createNavLinkHoverAnim) ) works in codepen, but not my local ; see this 

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

 

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.

[jstafford]

https://toddmotto.com/hacking-svg-traversing-with-ease-addclass-removeclass-toggleclass-functions/

[OSUblake]

Remember that if you are loading those SVGs via AJAX, you need to use the AJAX callback to create the animation. That's kind of like the ready function.

[OSUblake]

From a PM...

 

Here's an example of the callback. Like I said, it's kind of like a ready function. If you try to reference the element before the callback fires, it's not going to be able to find the element because it's not on your page yet.

// This will load the star.svg in the #container
// Once it's loaded, it's going to run this callback function
$("#container").load("star.svg", function() {
    
    var tween = TweenMax.to("#purple-star", 0.5, { 
    transformOrigin: "50% 50%",
    rotation: 180,
    scale: 1.3, 
    ease: Back.easeOut, 
    paused: true 
  });
    
  $("#purple-star").hover(function() {
    tween.play();
  }, function() {
    tween.reverse();
  });
});

http://plnkr.co/edit/5l2al3EPl9HIK2FQgO2C?p=preview

[jstafford]

yes, not having the callback was my problem. 

[OSUblake]

From another PM...

 

You can load all your SVGs and keep all your code inside a single callback by using a promise like jQuery's $.when(). Because jQuery's .load() method does not return a promise, you're going to have use a regular $.get() AJAX call.

 

First, make sure all your SVGs have the xmlns namespace attribute...

<svg xmlns="http://www.w3.org/2000/svg"></svg>

Now you can load all your SVGs like this...

$.when(
    
  $.get("circle1.svg", function(svg) {
    $("#container-1").append(svg.documentElement);
  }),
  $.get("circle2.svg", function(svg) {
    $("#container-2").append(svg.documentElement);
  })

).then(init);
  
function init() {
    
  // SVGs are loaded...
  // put your code in here
}

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

[jstafford]

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

[jstafford]

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.

[Carl]

again, it seems your selectors are messed up. If you just pass the right selector strings into your tweens it works:

 

https://plnkr.co/edit/qkqHdd5WI6Cq4zdAzA6R?p=preview

[OSUblake]

Are you using prototype just to create classes? I had no idea people still used that, but you don't need it. This is the pattern transpilers use to create ES6 classes.

var Person = (function () {
  // Constructor
  function Person(name) {
    this.name = name;
  }
  // Methods
  Person.prototype.greet = function () {
    console.log("Hello, " + this.name);
  };
  return Person;
})();

var bob = new Person("Bob");

So in a new browser, that could be written as

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log("Hello, " + this.name);
  }
}

So here's how you can encapsulate the hover in a class. And since I'm still using AJAX to load the svgs, I can also add them to a $.when() promise. Notice how I stagger the SVGs up when they are all ready.

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

[Carl]

Blake, that's super duper!  ES6 = JavaScript I can read!

[OSUblake]

If you miss ActionScript, you'll definitely feel more at home using ES6 classes.