Blog Post
MarkW
Community Member
Hi All,
I recently learned about https://lordicon.com/ and have been wanting to play with their animated icon library. This quick demo has three of their looping animation in it. Here's how I made it:
Step 1 - I took the first frame of each animation and converted it to a png using this service: https://ezgif.com/split
Step 2 - I recolored them to black and grey using Storyline's recolor option. This is the normal state for each button.
Step 3 - I added a hover state with a shadow.
Step 4- I added a selected state where I pasted the animated gif on top of the png.
demo: http://mindstreamelearning.com/animated_buttons
source: http://mindstreamelearning.com/animated_buttons/source.zip
Try turning them on and off. I find it strangely satisfying :)
I recently learned about https://lordicon.com/ and have been wanting to play with their animated icon library. This quick demo has three of their looping animation in it. Here's how I made it:
Step 1 - I took the first frame of each animation and converted it to a png using this service: https://ezgif.com/split
Step 2 - I recolored them to black and grey using Storyline's recolor option. This is the normal state for each button.
Step 3 - I added a hover state with a shadow.
Step 4- I added a selected state where I pasted the animated gif on top of the png.
demo: http://mindstreamelearning.com/animated_buttons
source: http://mindstreamelearning.com/animated_buttons/source.zip
Try turning them on and off. I find it strangely satisfying :)
SunetSullivan-7
5 years agoCommunity Member
These gifs are awesome!