Jump to content
Search Community

querySelectorAll event play / reverse timeline

Juc1 test
Moderator Tag

Recommended Posts

Hi all

 

Can anyone please correct my pen - I want to say 

"with the first mouseenter on any red box, play the timeline" (which reveals the green box) 

With the next mousenter on any red box, reverse the timeline

With the next mousenter on any red box, play the timeline

etc ie mouseenter event alternates between play and reverse the timeline

 

Thanks...
 

See the Pen oNbovWJ by Juc1 (@Juc1) on CodePen

Link to comment
Share on other sites

Hey Juc1. If you look in the dev tools console (F12) you can see that there's an error with your code. The console is invaluable when figuring out what is going wrong in your code. I highly recommend that you use it regularly :) 

 

Here's how I'd set it up:

See the Pen gOPXbyE?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Some notes:

  • I write about this technique in more depth in my article on animating efficiently. I highly recommend that you give it a thorough read :) 
  • You don't need new before gsap.timeline().
  • It's better to use x rather than left for performance reasons.
  • Like 1
Link to comment
Share on other sites

@Zach thanks a lot. I will read your article in depth thank you 😀 but for now your pen does "reverse the timeline on mouseleave" but in my question it was not reverse timeline on mouseleave but reverse timeline on next mouseenter =

 

first mouseenter  - play the timeline

(mouseleave does nothing)

second mouseenter - reverse the timeline

(mouseleave does nothing)

third mouseenter  - play the timeline

(mouseleave does nothing)

fourth mouseenter  - reverse the timeline

(mouseleave does nothing)

etc (ie alternating between one mouseenter and the next)

 

Could you please adjust your example pen ? 😀

 

 

Link to comment
Share on other sites

 

15 minutes ago, ZachSaucier said:

That doesn't make much sense in terms of usability... 

 

My pen is simplified in order to ask the question so hopefully it would make more sense with the background details. But anyway thanks a lot for your help 👍

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