Forum Discussion
Animated icons
Hi all
I am in the process of trying to create a new course which is really challenging my design skills. Is there a way to create animated icons? I know there are the markers but I want something different which really stands out and is quiet obvious. These will be used in a parallax designed slide, where the users must 'scroll' through the course to reveal information. The icons will be a 'notification' to click and reveal content, or go to another 'mini-section' to learn more.
Here is an example of what I mean by animated icons: https://codepen.io/dodozhang21/pen/siKtp
Any help and/or ideas would be great!
Thanks
10 Replies
you can create a gif animation (with 30 FPS) to show animated icons. place the static (first frame) on normal state and animated gif on hover.
I think this can serve the purpose you are looking for.
I have had problems with the animated gifs on hover states - I have one project on which I got them to work fine - a glow flashing around the edge of the button to click set to appear at the end of the slide
And another project on which they would not work at all - I tried adding the gif to the hover state - I cannot remember the exact 'whys and wherefores' of what went wrong but they are not stable. I added a wipe animation to the hover state to give it a bit of 'fake' animation to make up for it.
Hey Lizzie - Did you have a file you wanted us to take a look at or were you simply responding to Pankaj's suggestion for Troy?
just trying to be helpful and point out that gifs do not work in hover states.
Hi, I tried to make an animated GIF and it didn't work. The animation is sloppy and slower than it should be. I exported it from Photoshop and the gif weight 150 Ko. Is it too much? Do GIFs exported from Photoshop doesn't work?
Hi Xavier,
What's the frame rate of the gif you're using? Also are you using Storyline 2 or a different version? I know in Storyline 2 we still have an open issue where the gif frame rate isn't respected.
If you're unsure what frame rate you're using or the Storyline version can you share a copy here so that we can take a look?
I am currently using Storyline 360, the frame rate was 25 FPS and the total weight of the GIF was 150 Ko. I no longer have the file because I found another solution: I used markers which are animated.
Can I ask where people get animated gif icons fro please? I can't find them in storyline - or are you exporting them from elsewhere?
Many thanks!Welcome to E-Learning Heroes, Danielle!
I'm excited to see what folx share with you, but in the meantime, I wanted to share a couple of gif icon sources!
Thanks Becca!
These are great, I'm after some quite specific ones as I'm doing my first e-learning piece on cyber awareness. I don't have adobe aftereffects unfortunately but seeing the gif icons has given me the idea for the future so I'll more than likely come back to these!
