Jump to content
Search Community

using timeline methods in event listeners

Wayrse test
Moderator Tag

Recommended Posts

Hey all,

 

I'm a little confused as to why you can't use a timeline method in an event listener, and instead need to define a wrapper function for it to work correctly.

 

The error that is returned if you try to call a timeline method directly from a event listener you get:

 

this.seek is not a function

 

Any insights as to why this is?

 

See the Pen a34571d40164360d403967ec750b9ded?editors=1111 by MarioD (@MarioD) on CodePen

Link to comment
Share on other sites

Hey @Wayrse,

 

const tl = gsap.timeline({ paused: true }); // no 'new'
tl.to('.circle', {duration:1, x: 100});  //duration is now a property of the vars object

const button = document.querySelector('button');

// works as usual
button.addEventListener("mouseenter", function(){
  tl.play();
});
button.addEventListener("mouseleave", function(){
  tl.reverse();
});

 

Regarding gsaps 3 please have a look release notes.

 

Happy tweening ...

Mikel

  • Like 1
Link to comment
Share on other sites

Hey Mikel,

 

Thank you for taking the time to reply, sorry I wasn't as clear as I should have been with my question.

 

I'm more interested as to why we can't use `tl.play` directly on the event listener like this:

 

button.addEventListener('mouseeneter', tl.play);

 

 

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