1 Replies - 87 Views - Last Post: 02 September 2019 - 06:47 AM

#1 nidhin_152hq   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 01-September 19

Animating a character using HTML/CSS

Posted 01 September 2019 - 09:20 PM

We have a requirement from a client who needs to animate the character in the screen below

Posted Image

The page itself is constructed using SVG and the character can be broken down to specific parts that can be animated.

The question here is which is the most effective approach to take to achieve this.
I know this is closer towards an opinion based question, but I do not have a starting point to implement this functionality.

Sample GIF
Posted Image

What I have tried:

I have done some research and found that this can be achieved using

1. SVG animation using libraries like GreenSock
2. Using GIF images
3. Using a transparent video

Is This A Good Question/Topic? 0
  • +

Replies To: Animating a character using HTML/CSS

#2 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15226
  • View blog
  • Posts: 60,944
  • Joined: 12-June 08

Re: Animating a character using HTML/CSS

Posted 02 September 2019 - 06:47 AM

If it's something static yeah, an animated GIF would make sure it looks the same on any resolution.

I would not do a video.

Alternatively you can use HTML5's canvas for animation.
https://developer.mo...asic_animations
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1