I need to implement play and pause control on web animated images which should play and pause on the same frame itself. Please tell me the solution if anybody know about this

I need to implement play and pause control on web animated images which should play and pause on the same frame itself. Please tell me the solution if anybody know about this

• javascript
• animation
• webp

• Convert it to a video? – Kaiido Commented Aug 20, 2018 at 5:29
• For the size consumption i have e to webp animation instead of using video. – Ganesh Krishnamoorthy Commented Aug 20, 2018 at 5:41
• well you probably did something wrong in your calculations or conversion, videos should be smaller than animated images. – Kaiido Commented Aug 20, 2018 at 5:43
• Webp animated images taken smaller size than video of same file – Ganesh Krishnamoorthy Commented Aug 20, 2018 at 6:09
• Once again you probably did something wrong. Check this link in the section "What Should You Use". – Kaiido Commented Aug 20, 2018 at 6:14

1 Answer 1

Introduction

I was searching for myself an answer a moment ago, when i found your Question and already had some approaches to it, so i thought to share them with a post-answer [...]

• Approach 1

The freezeframe.js Approach, that works with webp too.
_{(but without play&pause functionality on the same frame)
WEBP DEMO} codepen.io/giorgosxou/pen/MWeqzgr

• Approach 2

The "Gif player-parser" Approach: Could be done by creating an alternative LC-GIF-Player (gif-demo) or gif-player (gif-demo) that would (parse) work with webp.

• Approach 3

My Approach kinda like the first approach, was to just change url from a static image to webp on hover or click (although i haven't implemented it yet.. Because for now i just removed them as they are not actually THAT important to me, most probably i will use gifs and aproach-2 )

Outro

I know it's not a solution to the question but definitely some kind of a helpful answer to those looking for an approach [...]