Making a traditional film animation using kirupa's slide show

so I am tying to make a slide show 25 frames per second each frame duplicated twice with each frame using current idea is to use kirupas slide show wih svgs as background images and work from there. the intent is to make a proper html 6 compliant clean code excercise that is interactive, without a ton of delay on mobile or useless fall backs. Also i am working with a client that is 15 years strong in making animation so no greensock tweens. this is stop start animation or a transition without a ton of wasted frames and clogging data. any clues would be gratefully apreciated

Hi @LondonKillsMe - welcome to the forums!

You can totally do this with a combination of CSS animations and each slide moving slowly. Are you taking an existing video and trying to turn the various individual elements from that that into an animated slideshow?

originally my clients website was run on flash and his content is svg drawings, there are 86 odd frames in this animation, if you could post up a quick stop start button for your slide show I could post up and show you on my website what I am trying to refine and could also see if the animation meets my clients expectations. a button to change the timer would be a massive bonus as well. trying to learn javascript but any help would be great

Oh and thank you Kirupa for the book, love it, took me a long time to find this, real learning curve for me, great work, really open and easy to understand.

the reason I chose transition is because all the frames can accessible by javascript and css and thus can be totatally interactive for any animation driven website, it has to run at min 25 frames per second with a repeat of each single frame, thats massive for a mobile to deal with at 1000kb per frame at 86 frames but its important to test out to see if its possible to make any totally submersive visual website.

If it is a series of SVGs that need to be played back, have you looked into creating something similar to what I describe below? :slight_smile:

That may be easier than trying to retrofit my slideshow code for essentially a frame-based animation.

thank you did think about using a sprite sheet and will use to see if animation runs better to client as he does not want it to tween. My thoughts are with sprite sheets are that they are not ideal for whole front page (index) web animations, different screen sizes and used mainly for smaller inserted animations in webpages. Your slider kind of acts like a big sprite sheet anyway but all the elements can be repositioned accessed using css. is there any way I can pm you with my website address so you can get a better understanding of what we are trying to achieve please.

Yes, feel free to send me a message via the forums itself here! :slight_smile: thanks its my birthday today

Wow! This looks fantastic. Sorry, what would you like to do beyond what you already have? It seems to be fairly fast, and each frame seems to be clickable too! so apart from making the animation look like a good animation by professional standards, I have to make the animation user operable so you open the jacket click on the links and the animation can restart ie link goes to new screen or closes if other link is chosen. So I have to make code that controls the movement of the frames by the links that are touched and essentially that is the beauty of the project because it could apply to really complex web animations just using html and css. jump in the rabbit hole if you got any suggestions this project is non tween and non gsock a traditional animation frame by frame and interactive on every level at base.

so K, just converted your slide show into a vertical one takes 3 secs to load - bad!!! and it does some really funky things, if you download the website and make it local take off the viewport div all the frames animate as you scroll. Really interesting that means every frame could be animated or the javascript could be used on one frame only. Needs soooo much work please help if you got any code to help sugestions please

the reason for making slide show animation vertical is the posibillity of making it responsive to all media, with horizontal there is an odd thought about making the aspect ratio right, which is really important to an animator, filmaker or visual music maker. Portrait aspect phones etc can be limited by width to control vh percentages etc instead of using padding hack to use height in horizontal layouts where height is the controller of the aspect ratio. After svg width height is removed and img, svg spreads to all widths of phones with 100% or vw, this is obviously controllable but you want the minimal amount of rendering painting resizing and vertical gives a constant for all devices controlled by width to give height if that makes sense by my excited thought process and writing and also content was originally designed to scroll vertically so it makes sense to make the content vertical for the animation also, and to add to this film projector reels roll vertically through the projector, making it more like a real film animation. note takes 3 secs to start loading on laptop god knows what it does to a phone