Jump to content
Search Community

Image change on hover

GiddyMachine test

By GiddyMachine
in GSAP

Moderator Tag
 Share

Recommended Posts

GiddyMachine test

GiddyMachine

Posted
Posted

Hello and thanks in advance for you guys help. 

 

I have a "grid" of shapes that I have set up a simple rollover for. The heart grows when rolled over and shrinks back when rolled off. 

 

In addition to the "grow" animation, I would like it to overlay the purple heart and tween its opacity from 0 to 1. In short I would like the heart to grow AND fade to the purple heart image. 

 

Any ideas on how to accomplish this?

 

See the Pen NWqrMWZ by arne-w-knudson (@arne-w-knudson) on CodePen

Link to comment
Share on other sites
ZachSaucier test

ZachSaucier

Posted
Posted

Hey GiddyMachine and welcome to the GreenSock forums! Thanks for being a Club GreenSock member. We couldn't do what we do without people like you.


The best way to set this up would probably be to layer the heart hover state over the original heart with an opacity of 0. Then when it's hovered, you animate it opacity to 1 and also scale both hearts. A timeline for each set of hearts might be helpful :) 


Side notes:

  • You should avoid scaling to a value above 1. Your elements (unless they are SVG) will become blurry. It's better to start with them having a scale less than 1 then animate up to 1.
  • You'd benefit greatly from using classes to style your buttons. That way you don't have to type #heart1, #heart2, etc. 
  • I would highly consider using CSS grids or flexbox to create this sort of layout. It will save you a lot of painstaking work of positioning each heart and row individually.
  • On CodePen, usually you just put whatever goes within the <body> in the HTML section. And you can load external JS resources by clicking the cog next to "JS". More info here: 
  • You could save a lot of time by using functions to create each row animation. Learn more about that here: https://css-tricks.com/writing-smarter-animation-code/
  • You could save a lot of time writing code by using GSAP 3's defaults. There's also an improved API, a smaller file size, and bunch of cool new features! Learn more about them here: 

 

That's a lot, I know, but going through these resources can really help you step up your JavaScript and CSS game. It will make your job of animating much, much easier and better in the long term.

 

Let us know if you have any specific questions/issues!

  • Like 3
Link to comment
Share on other sites
  • 2 weeks later...

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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...