Blog Post
MarkW
5 years agoCommunity 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 :)
- TeoKar5 years agoCommunity MemberVery interesting. Looking forward to find some free time and check it for myself. Thanks for sharing
- SunetSullivan-75 years agoCommunity MemberThese gifs are awesome!
- JessicaGrosman5 years agoCommunity MemberVery playful! Fun! It reminds me of this example of a button I found while doing research for this challenge : https://dribbble.com/shots/7002704-Launch-Button-Animation
- MarkW5 years agoCommunity MemberThat's so cool, Jessica! Thanks for sharing.