so I am tying to make a slide show 25 frames per second each frame duplicated twice with each frame using svgs.my 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?
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.
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?
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!
Londonkillsme.com 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!
londonkillsme.com 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.
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