Hi. Although I got this working long ago, I have been spending the last week or so trying to rebuild this using a more solid method (…as my current solution, although working, is a bit of a house of cards, unfortunately).
I tried Canvas, but that was a bit of a disaster, and far too much trouble than it’s worth.
So, I’m now trying this using SVG… just the tag, not vector graphics.
So, the thing I’m trying to rebuild (better) is a block of animation that is also responsive.
In this bit of code below, I illustrate the basic structure I currently have. It’s a ‘background’ image (not in the true HTML sense, but a raster image that is serving as the background for the animation), and (in this example) a single smaller image that is then being animated via Greensock’s animation library/system.
So, two key things need to be possible…
The smaller images need to go on top of the larger (background) image.
The whole thing needs to properly scale down together when the screen size gets smaller (responsive).
Currently (in my ‘working’ version) I’m doing that using relative/absolute positioning methods… but since everything is independent of the background, I have to use all kinds of hacks to get the ‘actors’ to scale down with the background image.
That’s why I was trying Canvas, and now the SVG tag, as they allow all the elements to be fused together as one element which (hopefully) would then be easier to scale responsively.
The code below does everything properly, as far as placement and animation… but the whole thing isn’t responsive.
I’m new to the SVG tag, and so I’m not even sure if the ‘canvas’ (for lack of better words) will behave as I hope, and scale down responsively. So far, it doesn’t seem to.
I get very confused about what and where to put various properties, such as centering, in the various levels of containers (row, column, and the actual ‘image’ item(s))… and so I suspect I’m kind of going around in circles, sometimes getting it correct, but with some other aspect messing it up.
I’m really hoping someone can look at this demo code, and point out to me what needs to be altered in order for this to work as it is now, but with the SVG ‘canvas’ properly scaling down responsively as the screen gets smaller. (I know how to do responsive sites fine… it’s just when using an SVG tag that it seems to be getting very confusing/frustrating.
<div class="container text-center"> <div class="row"> <div class="col-12 offset-0"> <svg class="svg"> <image x="40" y="0" href="img/background.png" class="background"/> <image x="70" y="0" href="img/actor.png" class="actor"/> </svg> </div> </div>
Technical note: The SVG ‘canvas’ is intentionally 80 pixels wider than the background image, which I have placed 40 pixels (x) from the origin… this is so the ‘actor’ can overhang the left and right edges of the background image without being clipped (by the edge of the SVG canvas itself).
Again, I’m not even sure the SVG canvas WILL scale with the containing element/DIV. New to this…