Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
payne199

Using IF/ELSE not synching animation

Recommended Posts

I have a set of 3 buttons. When a button is clicked, it moves, and then does a short animation. What I am trying to do is be sure the animations are in sync with one another if two or all three buttons had been pressed. This may not necessarily be a problem specific to gsap, but I am using the powerful platform and thought I would post to its forum. The Codepen should make my question clear. Thank you.

See the Pen NWNXabj by don199 (@don199) on CodePen

Link to post
Share on other sites

I'm with Visual-Q - What's the desired result? How does clicking on a button affect other buttons?

Link to post
Share on other sites

HI Zach. Yeah, your second Codepen nailed it! The code was much simpler than I thought in terms of the amount of lines used. But I'll be chewing on that one for a while to really grasp what is going on with it. 

Although I called them buttons, in reality they will be images. When an image is clicked, it will reveal text as it goes across the screen. The user is then being prompted to click the image again if they are wanting to be taken to that specific page/category. 

Thanks so much!

Link to post
Share on other sites
46 minutes ago, payne199 said:

used. But I'll be chewing on that one for a while to really grasp what is going on with it. 

Basically just added a parameter to the  function,

 

function ifElseAnimateBorder(ring)

we pass the parameter value [ringx] in the delayedCall

 

gsap.delayedCall(2, ifElseAnimateBorder,[ring1]);

and use it as the target for the tweens added to the timeline

 

.to(ring, 2,{scale: 1.3, ease: "power2.out"}, 0)

then tell the timeline to play from the start you could also use restart instead. 

 

buttonPulse.play(0);

 

  • Like 1
Link to post
Share on other sites

Improved example of previous:

 

This will prevent duplicated tweens  being created if buttons are errantly clicked, and waits for end of current iteration on timeline before adding tweens, so you don't have to tell it to replay from start.

 

See the Pen RwaELbw by Visual-Q (@Visual-Q) on CodePen

  • Like 4
Link to post
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.

×