onClick move only happens once

[SBee123]

Hi!

Part of this is doing what I had hoped - When the user clicks the blue box, a new red content box moves up to cover it and when they click the red box it moves back down. My problem is that when i click the blue box again to restart the motion (again) nothing happens i must be missing a reset or something. Eventually this page will have many absolute positioned boxes like this, moving from different x, y directions hoping I can get this to work. This is not a traditional webpage, but a special use case.

Thank you in advance!

See the Pen aaPyKa by aqshawnbee (@aqshawnbee) on CodePen

[PointC]

Welcome to to the forum.

 

Your timelines have already played so an easy fix is to play(0) like this:

 

$("#blue").click(function(){ Anim3.play(0) }) ;
$("#red").click(function(){ Anim4.play(0) }) ;

 

Happy tweening.

 

[SBee123]

Thank you very much PointC!! So helpful. 
Love learning about GSAP - it's amazing.

 

[SBee123]

Hello!

 

I have another question related to this - I have updated my codepen here:

 

See the Pen aaPyKa by aqshawnbee (@aqshawnbee) on CodePen

 

My question is - If I have clicked on one of the top boxes (blue, yellow, purple) and the link boxes move into place, is there anyway i can get it so that only one link box can be showing at once? So if the red link box moves up and I go over and click the yellow box, the red link box will shift back down, and the orange box shift up. 

Than you in advance!!

[Dipscom]

You can create a single function that handles your tweens. It will also reduce the number of tweens you have to manage.

 

See the Pen YOBxyv?editors=0010 by dipscom (@dipscom) on CodePen

 

[SBee123]

Thank you very much!! Excited to understand this - appreciate your help Dipscom!