Jump to content
Search Community

undefined is not a function on Timeline

anteksiler test
Moderator Tag

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

Hi there, using the below code to run some animations on click:

a.on('click', function() {
    var selector = $(this).attr('data-filter');
    that.isotope('once', 'layoutComplete', function(x, y) {
        var iso_in = _.pluck(y, 'element'),
            iso_out = _.difference(_.pluck(x.items, 'element'), iso_in),
            iso_ani = new TimelineMax({
                onComplete: tl.timeScale(1.6).reverse()
            });

        TweenLite.set(iso_in, {
            opacity: 0,
            y: 100
        });

        iso_ani
            .staggerTo(iso_out, (0.1 * iso_out.length), {
                y: 100,
                autoAlpha: 0,
                ease: Quart.easeOut
            }, 0.1)
            .staggerTo(iso_in, (0.25 * iso_in.length), {
                y: 0,
                autoAlpha: 1,
                ease: Quart.easeOut
            }, 0.25);

    });
    that.isotope({
        filter: selector
    });

    return false;
});

Everything is working, but couldn't find where it is triggered. Could it because sometimes the elements are empty? 

 

If so, how can I prevent that?

Link to comment
Share on other sites

Hello anteksiler, and Welcome to the GreenSock Forum!

 

Why not try to console the output of the element when you click, to debug what is being triggered. But i would bind the element to the document as context.

:

// I presume 'a' is a variable?
$(document).on('click', a, function() {

   var $this = $(this);
   
   // console the output of the element and see if it is the right element
   if(window.console) console.log($this);

   // other code bits go here

    return false;
});

Then once you find the element is passed each time, then go from there.

 

Also you have variables in your code example above which makes it hard to see what is happening without context to what those variables represent

 

A codepen demo would be really helpful in helping you. Here is a nice video tut by GreenSock on how to create a codepen demo.

 

Thank You! :)

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