TimelineMax Problem, again...

[jstafford 23 Likes (Newbie)]

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 8,599 Likes (Superhero)]

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 9,066 Likes (Superhero)]

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

[Carl 9,066 Likes (Superhero)]

man, beaten twice by PointC in one day. 

[jstafford 23 Likes (Newbie)]

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 23 Likes (Newbie)]

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

[PointC 8,599 Likes (Superhero)]

man, beaten twice by PointC in one day. 

It's a pre-New Years Eve miracle. 

[jstafford 23 Likes (Newbie)]

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 23 Likes (Newbie)]

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 23 Likes (Newbie)]

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

[PointC 8,599 Likes (Superhero)]

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 23 Likes (Newbie)]

 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 8,599 Likes (Superhero)]

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 23 Likes (Newbie)]

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 23 Likes (Newbie)]

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

[OSUblake 9,990 Likes (Superhero)]

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 9,990 Likes (Superhero)]

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 23 Likes (Newbie)]

yes, not having the callback was my problem. 

[OSUblake 9,990 Likes (Superhero)]

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 23 Likes (Newbie)]

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 23 Likes (Newbie)]

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 9,066 Likes (Superhero)]

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 9,990 Likes (Superhero)]

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 9,066 Likes (Superhero)]

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

[OSUblake 9,990 Likes (Superhero)]

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