Cant see some elements of HTML5 animation

  • 1
  • Problem
  • Updated 4 years ago
  • Solved
I made an animation that shows smoke over a plate of food that you can see here: http://iqhome.com.ec/doncamaron/menu%20slide%201/index.html it was made on html5. I have it on a webpage widget on a rise presentation. The problem is that when i play it on a chromebox rise vision player the smoke wont show. Theres also a drop of water on the coke cup that works everytime. I have seen the smoke on the chromebox but it stops and never shows again. One time I emptied the cache and it started working but later it stopped. I need help with this so it shows everytime.
Photo of Jose IQsystems

Jose IQsystems

  • 148 Points 100 badge 2x thumb

Posted 4 years ago

  • 1
Photo of Blake Freeman

Blake Freeman, Official Rep

  • 36,116 Points 20k badge 2x thumb
Jose,

Our local designer was out yesterday, I'm having him take a quick look at your web page to see if he has any input. I'll get back to you soon!
Photo of Blake Freeman

Blake Freeman, Official Rep

  • 36,116 Points 20k badge 2x thumb
Jose,

Our front end developer has recommended you use something developed in CSS3 instead of Java for this application. He provided this codepen link as an example of something you could use.
Photo of Jose IQsystems

Jose IQsystems

  • 148 Points 100 badge 2x thumb
Hi Blake thanks for your help. We used Google Web designer to make that animation as a test, we dont know anything about coding and developing. So our animation wont work? Can i change any settings on Google Web designer to make it work? What software do you recommend to make these animations?. Thanks from Ecuador!
Photo of Blake Freeman

Blake Freeman, Official Rep

  • 36,116 Points 20k badge 2x thumb
Jose,

Unfortunately I'm not a designer. I will forward this thread on to one of our team members and they will point you to some resources.

Thanks!
Photo of mlm

mlm, Official Rep

  • 4,624 Points 4k badge 2x thumb
Hi Jose,

As a test I would try converting the steam.png into a jpg and putting it on the top most layer. This way you can isolate if its an issue with the layering, png transparency or the looping of the animation.

I know there are various ways to loop animations in GWD such as looping the entire timeline or just the element. I would suggest experimenting with  that as well.
Here is one method:
https://groups.google.com/forum/#!searchin/gwdbeta/Loop/gwdbeta/2FBxPhl8w6o/rUVcTTC5CFYJ

Unfortunately Google Web Designer is still in Beta and in my experience has created some buggy results. So it really will be  a matter of isolating the issue then finding a work around.

Adobe has a product called Edge Animate which is very similar and would be worth checking out. I have gotten great results with it.

Thanks,
Mat