GSAP play animation 1 time on cursor update

[DanielLav]

Hello dear GSAP community.

 

I want to create an effect where we follow the user's cursor and actually split the screen into 3 equal parts in width.

 

If the user is on the left side, we show him one background, if the second is in the center, and if on the right, then the third.

I wrote a small script that keeps track of the position of the cursor each time and performs an animation. Also I try to appropriate at this moment value GSAP to.

 

But I am facing three problems.

 

1) gsap animation is performed on every mouse movement (and I want the background to appear when the user has moved to a certain part of the screen and disappear when he leaves it). And then it appeared again when hovering again (without the flickering effect).

 

2) If you stop at one of the backgrounds, then for some reason another background may appear at that moment

 

3) Initially, I want to set all backgrounds to autoAlpha: 0 (in function hiddenThreeBG(), but then on the first hover, all backgrounds are visible for 1 second.

 

I think that there is a mistake in just 1 or 2 places. I want to know where.

I would be extremely grateful for any help from each of you.

 

See the Pen ZEMJPao by ProjectDCL (@ProjectDCL) on CodePen

[mvaneijgen]

Why not tie the mouse enter event to the elements it self? 

 

I personally find it always easier to work with timelines when working with GSAP, it gives you so much more control and there is always time to optimize code when you're done. What I've done in your example is create a timeline for each animation, set that all up so that you don't create new animations each time you hover over an element, this way I can play certain timelines forwards and others in reverse. Take note of that I've use .restart() instead of .play() on the timeline, this way I can guarantee that the animation will always play from the beginning, you can of course change that. 

 

I've also used .from() instead of .to(), then I don't need any extra setup to have the animation work. Hope it helps and happy tweening! 

 

See the Pen yLxorow?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

 

 

Side note: You can also use flexbox to distribute your elements, this way you don't have to do weird calculations and use offsets to have them side by side. Here is an example with your calculations removed and 5 elements, but this also works with 3 or 10

 

See the Pen yLxorKW?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

[DanielLav]

 

Thanks for the quick response! Your idea works well, but on top of my backgrounds there will be other content (text, some pictures) and that content will have a z-index larger to be clickable. With this approach, I simply won’t be able to hover over the block area that I need. I will attach screenshot of what my page should look (with backgrounds)

 

Therefore, I am attached to tracking the position of the cursor.

 

Your animation certainly works more predictably, but I don't know how to adapt it to my task.

Do you have any ideas how to make this when I have content with higher z-index?

 

 

[mvaneijgen]

Do the items on top need to be clickable? If not you could set these itemes to pointer-events: none; with css. 
 

Otherwise you could implement your solution with the 1/3 of the screen, but keep my logic with the time lines and just call the play() and reverse() of the timeline 

[DanielLav]

Yes, I already done with that. Just take you logic and implement in 1/3 of the screen. One thing that I change - I set .play() instead .restart()

[mvaneijgen]

Cool! If you still need help be sure to post a new demo or if you have a working one also post it here! So if someone stumbles on this post they can learn from your solution!