Hi, Im brand new to Hype and Im bring to get a costume animation in a form of animated GIF on an element that will be used as a button. The problem was that GIF play as soon as you load them, so I worked out a solution where I start the timeline for that button with a still image and on the second frame replace it for the GIF. All the buttons also have the reverse of all the other buttons (gif to still) so that I can use relative timelines to circle the animations. It worked great! Until I tried it in google chrome and firefox… It works great with Safari but not in them!
Can anyone give me some advice! I read about the problem of getting GIFs to play on command and found some solutions using pure javascript or jQuery but Im not a coder and my timeline solution was perfect until it wasnt. ): Would appreciate if anyone could help me figure out why firefox and chrome don’t replay the animation like safari, or a simple alternative. Thanks!
It looks like Chrome/Firefox don’t restart an animated GIF when resetting it as a background image.
I’d honestly just ask why you’re not doing the rotation and background pop as a Hype-based animation? All those effects are possible and would look much better if done in Hype.
You’re right! The more I think about it, it can all be done in Hype. Guess the reason I made it in After Effects is that its easier for me to import an Ilustator file in After Effects and do it there (plus I’ve been using it for 10 years and understand its workflow perfectly). To make it in Hype I have to expot every layer seperatly, and I also wanted to find a solution for doing it this way so I could maybe mix in a little more compicated animations (that can’t be done in hype) into a hype document in future projects. For instance, the second button in this attachment. Im not sure if I would be able to get this kind of animation (the line “blowing up” on hover) in hype. By my observation Hype uses divs to create masks so its not vary versatile for complex masking and scaling alone doesn’t really do the trick by it self. Sorry if Im not seeing something obvious but Im new to Hype and would love to know if there is something Im missing. But you are right and thanks for the answer!
I’ve been experimanting with something else that works but I’m afraid that it isn’t “web friendy”. I import every second frame (or render 14 frames per sec) and manualy reduce the opacity after its run. Basicly I create a sequance inside Hype. The only thing is that I think it would be too “download heavy” especialy as a simple “on hover” action.
Simply use two images for each info icon and rotate the x axis.
You can then use a oval element and it’s scale sizes to expand a grey ring. Set the easing to bounce and adjust it as needed.