Jump to content
Search Community

Button states

clf test
Moderator Tag

Go to solution Solved by OSUblake,

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, sorry for my english.


I'm stupid noob with gsap and with animation in generally. I want to animate 3 button states, that i'v made in photoshop. I don't want to dublicate those background effects in css, i just want to use 3 different images. For example:

<input type="button" id="btn" value="Button"></input>

  background: url(http://storage5.static.itmages.ru/i/16/0811/h_1470942213_5377916_851bff8844.png);
  width: 197px;
  height: 78px;
  border: none;
  position: relative;
  transition: background 1s;
  font-size: 18px;
  color: white;

  background: url(http://storage5.static.itmages.ru/i/16/0811/h_1470942213_3098246_d0e3709dbf.png);

  background: url(http://storage5.static.itmages.ru/i/16/0811/h_1470942213_8181429_4fa4a7ed9c.png);

In this case when i move mouse out of the button before animation ends, it returns to normal state with a jump. And when - (mouseIn for >=1 sec), (mouseOut for < 1s), (mouse in) , it also jumps to hover state, without smooth transition.


I saw a lot of examples where one image crossfading to another, but they always put one image at front and second at background, and change the opacity. I did the same thing in Flash using greensock - created 1 movie clip with 3 layers each of it contains 1 movie clip with a button state(normal,over,down). So probably solution is to create pseudo button in 1 div with 3 images, and change opacity on mouseIn\Out\Down event.


But is it possible to do without 3 elements for each state? Without constructions like:

<img class="normal" src="..." />
<img class="over" src="..." />
<img class="down" src="..." />

I really don't understand how to do it with TweenMax. Please help =(

See the Pen vKvbYN by clf (@clf) on CodePen

Link to comment
Share on other sites

That's going to be really messy to do with images and probably not worth the effort. You're probably going to be better off figuring out how to create those gradients with CSS. Do a search for a CSS gradient generator if you need help.


If you still want to use images, this thread might be of help...



It also might help using a button element and nesting your images inside of it.

<button id="btn">  
  <img class="default-img" src="http://storage5.static.itmages.ru/i/16/0811/h_1470942213_5377916_851bff8844.png" />
  <img class="hover-img" src="http://storage5.static.itmages.ru/i/16/0811/h_1470942213_3098246_d0e3709dbf.png" />
  <img class="active-img" src="http://storage5.static.itmages.ru/i/16/0811/h_1470942213_8181429_4fa4a7ed9c.png" />
  <div class="button-text">Button</div>
  • Like 3
Link to comment
Share on other sites

Thanks for reply.


Thoes gradients i use for example,of course it's very simple create them with css.But what if a button is a complex image, that is difficult to dublicate through css. Just look at



for example. In my opinion author placed 4 buttons in the corners with 2 states. When he clicked on one, the led is changing from blue to red but without smooth transition.


As i understand from you post, the only way is to put images inside the element, and then change the opacity.

Link to comment
Share on other sites

Here's an example of how you could transition between 3 images. It's pretty involved.


See the Pen 55a9bfa6e7cda64fbcf7c01e9a330d33?editors=0010 by osublake (@osublake) on CodePen


If the only differences between your images is the color, you could probably get away with using one image and applying a color matrix or rotating the hue. Here's an example of how to rotate the hue.

See the Pen MwPzox by jonathan (@jonathan) on CodePen

  • Like 4
Link to comment
Share on other sites

I created 2 pens, that approach to solve my problem. Mb somebody will be interested in


See the Pen WxPvWg by clf (@clf) on CodePen

   urls inside html container, small JS code

See the Pen EyAjWz by clf (@clf) on CodePen

 urls inside css, JS code much bigger. Here divs are created dynamically, but html is cleaner


I will be appreciated If it's possible to optimize my tweening code.

Link to comment
Share on other sites

  • Solution

Ok, that makes more sense now that I see how you were trying to do it.


To optimize things, you should try to reuse your animations. Right now you're creating a new tween on every event. This can result in inconsistent timing and easing. It also uses more computer resources. How about this...

See the Pen 773b3348ca605c46924331cbd6bd9e43?editors=0010 by osublake (@osublake) on CodePen

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