Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Thales Ribeiro

RollOver button w/ timeline

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

Hey guys, 

i'm trying to do something simple and that i've done before in a similar way, but for some reason it's not working on this project.

I'm not sure where am i getting the syntax wrong.

 

I just want to have a timeline to animate the rollover state for the button. Basically i'm going to have an animation for the <a> itself and another one for the span that is inside the <a>.

 

does anybody see the error?

 

See the Pen gAolh by anon (@anon) on CodePen

 

 

Cheers,

Thales

Link to comment
Share on other sites

Hi Thales,

 

There are a couple of issues with your code.

 

First you're not adding a semi-colon after creating the timeline, just a coma, therefore the first .to() instance is recognized as a variable and not added to the timeline, then the browser has problems interpreting the dot after tl, so basically your code breaks at that point:

var tl = new TimelineLite({paused:true}),//this coma indicates that another variable is comming up
    // the point breaks the code because is unexpected
    tl.to(element, 1, {opacity:.5, ease:Power2.easeInOut});

Second you're calling jQuery's find method on a DOM element and not a jquery element. In a $.each loop the element you make reference in the callback refers to the DOM element, to call a jquery method on it you have to wrap it in a parenthesis with $ sign before, just like any other jquery object:

// element refers to the DOM element, not a jQuery object
tl.to(element.find("span"), 1, {opacity:0, ease:Power2.easeInOut});

This code should do it:

$(".video").each(function(index, element) {
  var tl = new TimelineLite({paused:true});
  
  tl.to(element, 1, {opacity:.5, ease:Power2.easeInOut});
  
  tl.to($(element).find("span"), 1, {opacity:0, ease:Power2.easeInOut});
  
  element.animation = tl;
})

The rest has no issues.

 

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Hi Rodrigo, 

 

that makes sense. thanks for you help!

 

The updated code worked fine in the CodePen, 

but when i dropped that in my code it doesn't work for some reason.

 

I even put a console.info to check if the .hover was actually working, but it's not.

When i delete the animation function it works.

 

Has this ever happened to you?

$(".video").each(function(index, element) {
  var tl = new Timeline({paused:true});


  tl.to(element, .5, {opacity:.2, ease:Power2.easeInOut});


  tl.to($(element).find("span"), .5, {scale:2, ease:Power2.easeInOut});


  element.animation = tl;
})


$('a.video').hover(
  function(){
     this.animation.play();
     console.info("OVER");
  },
  function() {
     this.animation.reverse();
     console.info("OUT");
});
Link to comment
Share on other sites

There's also another error in the console:

 

Uncaught ReferenceError: Timeline is not defined

Link to comment
Share on other sites

Hi Thales,

 

You got the timeline definition wrong:
 

var tl = new Timeline({paused:true});

Is either TimelineLite or TimelineMax, there's no function called Timeline:

// TimelineLite
var tl = new TimelineLite({paused:true});

// TimelineMax
var tl = new TimelineMax({paused:true});

That's why your code is breaking up at that point and the over/out callbacks don't work unless you remove that reference.

 

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Yeah i fixed that.

 

there was also a strange thing that i had to change in order to get it working,

i had to call my .js at the bottom of the page, after the TweenMax.min.js, is that normal?

 

Cheers,

Thales

Link to comment
Share on other sites

Yep, basically the code that you creates works on top of GSAP and jQuery, therefore those two libraries must be loaded before your code, otherwise when your code is loaded there won't be a reference to certain functions and methods. If you add your scripts tag after TweenMax's when your code executes there will be this reference:

var tl = new TimelineLite();

So basically the browser will look for a function called TimelineLite, but sice GSAP hasn't loaded yet it won't find that functio, therefore your code won't work.

 

A good practice is to add your script after all the necessary libraries are added:

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/TweenMax.min.js"></script>
<script type="text/javascript" src="js/yourScript.js"></script>

And also in your script add everything in the $(document).ready() method, in order to be sure that everything has been added to the DOM before the code is executed, like that eberything that's needed for your code to run properly will be present:

$(document).ready(function(){

// your code here

});

// another alternative
$(function(){

// your code here

});

As for the second choice I'm not too fund in using it because I've found some issues in old versions of internet explorer and in CMS like wordpress and drupal, is always better go with the first, unless of course your site is aiming for modern browsers.

 

Rodrigo.

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