Jump to content
GreenSock

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

TimelineMax Problem, again...

Recommended Posts

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

Link to comment
Share on other sites

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"});
Link to comment
Share on other sites

man, beaten twice by PointC in one day.  :-P

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

man, beaten twice by PointC in one day.  :-P

It's a pre-New Years Eve miracle.  :lol:

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

:)

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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-incompatiblesvg.className.baseVal

 

Weird thing is that the classes and line and rect within the svg tag select just fine.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

yes, not having the callback was my problem. 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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

  • Like 5
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

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