Jump to content
Search Community

button state transition

paper test
Moderator Tag

Go to solution Solved by PointC,

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

Hello everyone! i'd like to know if is possible to do this...

I have seven images on the page that I want to use as buttons:

<Img class = "menuSx" id = "btnSx1" src = "img / svg / btnTradeRepository.png" onMouseOver = "this.src = 'img / svg / btnTradeRepositoryOver.png'" onmouseout = "this.src = 'img / svg / btnTradeRepository.png '"onclick =" changes (this); "/>

in short, I've set the html tag attributes for use images as buttons. My problem is that all state buttons must have transitions and when I click on one of these seven pseudo buttons it must remain active after click and "deactivate" the others with transition.

Is it possible with Gsap?
additional information: this images was simple svg rectangles with text that i have converted as png...
I hope someone can help me!

Thanks in advance

Link to comment
Share on other sites

Hi paper  :)

 

Are you animating from one state to another? GSAP can certainly tween() or set() most any value for you. If I'm understanding your question, this is more of a logic issue. If you want a certain animation to affect all the other elements of a set instead of the one you're activating, you may want to look at jQuery's not():

 

http://api.jquery.com/not/

 

It's hard to ascertain the desired behavior from your description. If you could make a simplified CodePen for us and describe the expected outcome, we should be able to help.

 

https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

 

Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

o.k. I'm lost.

 

The images in your pen seem to be solid colored rectangles. I don't know if those are meant to be placeholders for images or you're wanting to only change the background color on hovers or clicks.

 

Rather than keep trying to figure out what should be happening in your pen I think a couple other threads can be helpful for you.

 

Here's one on button states

 

https://greensock.com/forums/topic/14897-button-states/

 

This one on toggling tweens in a DRY fashion is excellent. Please pay particular attention to Blake's CodePen in post #2

 

https://greensock.com/forums/topic/13268-how-to-toggle-tweens-in-a-dry-fashion/

 

I think those should help with your questions.

 

Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

Yeah - I figured we had a small language barrier here, but we can work through it. :)

 

I've re-read your original question a few times and I think I understand what you want.

 

You have the buttons and you want an active button to animate on click, right? But if you click another button to activate it, you want the current active one to animate back to the original state?

 

If that's what you need, I don't think we even need timelines here. This can be accomplished with two tweens. I've made a simple demo for you. What's happening on click is all the boxes tween to their original state, but the one you clicked on animates to the active state. Using 'this' we can tell GSAP to override the box tweens and do something different with 'this'.

 

Please look at this demo and see if this is what you meant.

 

See the Pen qRpBoK by PointC (@PointC) on CodePen

 

Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

Hi POintC! tnx for reply :-)

i've forked your pen

See the Pen OWzOBL by paper3d (@paper3d) on CodePen

i add a css pseudo class for simulate over state button but seem there are conflicts because it work only if i don't clik a button..

 

then i'm trying to assign to buttons the values of an array but nothing to do for me :-(!

tnx a lot for your big help!

Link to comment
Share on other sites

  • Solution

okay - so you need a hover state along with the active state?

 

Your CSS hover color only works until click because we're using GSAP to animate the colors of all the boxes on click which overrides your CSS.

 

There would be a few ways to do this, but I think the easiest to understand would be adding a jQuery hover function to the pen. Here's a fork of your pen again. I've changed the start/hover/active colors to a variable and made them more distinctive so it's easier to see what's happening.

 

See the Pen XpVYym by PointC (@PointC) on CodePen

 

We just need to make sure the hover doesn't affect an active button. We could add a class to it and check for that, but in this case we're changing the width of an active button so we can check the width. If it's 150, we know the button is not active so we can set() the hover over/out colors. If it's not 150, we know the button is active and the hover will be ignored. Hopefully that makes sense and is what you need.

 

I also adjusted your append method to add the button names from your array.

 

Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

Hello PointC. Thank you so much for the time you've lost with me! I'm studying a lot and I hope one day to be able to help someone too. This to me is a course of study. I hope your answers are helpful to someone else besides me. So I'll try to do another.
How can I know which button was pressed and assign to it a function that modify css (from display: none to visible) and then creates a timeline by starting a simple animation?
tnx!!!

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