Jump to content


Cannot trigger animation using a button

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

I'm trying to create a simple animation with a trigger button using TimelineLite(), but some how I got stuck...


Here is my pen:

See the Pen bfojB?editors=101 by vincentccw (@vincentccw) on CodePen


I can trigger the animation when I hover over the red square but not the button itself (since the animation is store inside the square instead of the button)


Thanks for the help in advance

Link to comment
Share on other sites



Your problem is that you assign the timeline to the element with id of of a "box", but on the mouseenter event listener this points to the element with id button. You have to declare the timeline variable and then access it in the mouseenter event listener;


Here is example how to to this: 

See the Pen Jbthk by bassta (@bassta) on CodePen

  • Like 2
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.