Make this animate!?

[cscodismith]

I currently have my

<a href="#">Sign In</a>

link set to open a hidden div on top of the page when it is clicked on but seems too bland. Would like to make it animate so it doesn’t just show up out of nowhere. Not sure how I can make an animation out of this so it comes into the page a little more smoothly and not so sudden. You can view the source code of the project here. In order to see what I am talking about simply click on the Sign In option to the right of the header.

Best regards,
Codi

[Paulie_D]

Lots of choices….since you can’t animate the display:property.

Slide it down/in or animate the opacity/visibillity or open a modal instead and others.

All of which can be managed pretty easily with JS/JQ.

So, tell us what you want, give it a shot and if you can’t get it to work, we’re happy to help.

Oh…and Links Are Not Buttons

[michaellee]

I’ve got a couple of examples of animated divs of sorts on CodePen. Have a look, it might help you with your problem.

Rotating button menu
Animate max-height of an element

There’s also a write up of the max-height animation on CodeHive.

[Author]

Posts