Responsive block of animation (Retry)

Beginners
1

I’ve actually successfully created this several days ago, and had made a previous post asking about this… but, although my version works, it’s done using some cheats/workarounds, and I’d love to do a more solid/proper version of it.

At it’s simplest form, I just want to have a (‘stage’) image with several smaller images overtop of it (z-axis), which will be animated (position/rotation)… AND the ‘stage’ image and it’s smaller child images (and their animations) would properly scale together when put in a responsive Boostrap structure.

The way I’m doing it has one annoying flaw, in that the child images don’t scale when the larger image does, so I had to cheat that via the smaller image’s column size, and padding/positioning offsets.

As a result, even the positioning of the child elements is a matter of guesswork/compromise, partially since I ended up having to use percentages.

I tried again today, completely rebuilding it from scratch… and this time around, the scaling is happening nicely, but the positioning is the issue. Despite the proper scaling, using pixel values results in the children pushing off to the right as the screen gets smaller (…the offset is not scaling with the image). And when I tried percentage values, it did the same (which was a surprise, as I thought that would always result in the same relative location).

I looked into Canvas, and was pleased to see that all the placement of the child objects are done relative to a fixed size ‘stage’ image… so I wasn’t having to manually adjust their size/placement for each screensize version of the ‘stage’ image.

So, the question is… Is there a way to do this using vanilla CSS… having smaller (child) objects on top of a ‘stage’ object, animating, yet all the child objects (and their animations) scaling down together when in a responsive structure? Or, do I need to have the ‘stage’ a Canvas item?

Here’s a codepen demo to help illustrate what I mean. This is more just to show you the visual layout I’m describing. The code itself would not necessarily be the same in the real version. Again, just a large ‘stage’ image, with several smaller images overtop, which would be animated (position and rotation drifting)… and, most importantly, everything (children images AND animation) would scale down properly with the stage image.

2

There are at least two approaches to this.
In JS, you get the size and position of your “stage” with something like
var stage = document.getElementsByClassName("background"); var stageSizePosition = stage.getBoundingClientRect();
You then have access to the location of the bottom right corner. The use JS to reposition each of your child elements to be within the “stage”. At the same time you can scale the child elements.
In CSS, I would guess that you could set the size of the children using straight vh and vw. Then set position using calc. To give you any specific code I would need to see where exactly in the layout you would want everything.

1 Like
3

Hi @ladlon,

First you need to get your CSS and HTML adjusted in the proper way!
Made a example:

4

@RobM Hi. Well, that’s a new take on how to solve that! Thanks. One of the big problems I’m having in searching for solutions, is that inevitably, every example I see (ex. YouTube tutorial) deals with a fullscreen website… meaning that the entire screen is being used for the scaleable ‘stage’… In that scenario, you have a few more options, including absolute positioning, viewport units, etc… In my case, I have a 570x360 image centered to the monitor, and it’s inside that where I want to contain all the animation (smaller images moving/rotating, etc overtop of the larger ‘stage’ image… like dancers moving around on a stage… and that whole thing then needs to scale (stage, actors AND their animation (distances)) with the responsive column that contains it.

I’ll certainly look into your suggestion… My main concern (besides it working!) is compatibility with browsers/platforms… so, I have to verify that.

I FINALLY got the info I required regarding how to actually access Canvas via GSAP (Greensock animation platform)… That was a battle getting a relevant answer on the forum, unfortunately, as I was constantly getting info on Canvas and/or GSAP… but not how to communicate between them, which was the only thing I was confused about. What little mention of it there is on the whole Internet, is old, and relating to things I wasn’t trying to do… so I was concerned about how optimal/current the info would be. Turns out, I was right. The methods shown there WERE not the ‘right’ ones for my purpose. Now I can move forward, and try Canvas out fully. It did seem to work, as far as it all scaling as one… which makes sense, since it IS ‘one’ element, the composite of all the images merged together.

@AllMediaLab Hi. The Codepen code is just for the sake of creating a visual representation, rather than me just describing it with words… The code itself, like I said, is not necessarily accurate. I’m not sure what you changed (…I can’t figure out how to widen up the Codepen window, so I can see the preview window fully). All I can see so far in the code, though, is a syntax error with one of the DIVs. All I’m trying to show, is that it’s a div (which is responsive in the real version) that contains a large ‘stage’ image, and some smaller ‘actor’ images that will animate on top of it… and that the stage, actors and the actors animation should all scale down with the responsive column that contains them. So far, I could only either get everything to work, except the actors wouldn’t scale… or I could get everything to work, but the animation itself (distance the actors travel) wouldn’t scale… and using possible solutions like absolute positioning would fix one thing, and break the other.

I’m going to try Canvas, now that I got the final(?) piece of the puzzle regarding that.

I was also shown the SVG tag… which I thought was just for creating vector shapes. Turns out, you can use it as the containing DIV, put images in it, and each of those images then can be given x/y values, without need for any kind of relative positioning, etc. Increadibly simple, it seems. Canvas has a little better browser support, so I’ll give it priority.

Again, the current version of my page that I have does ‘work’… it’s just that I would rather not have to rely on kind of messy workarounds, like the manual breakpoint positional offsets and column sizing… plus, figuring out the proper x/y values is a bit hit and miss with my current method!

Thanks!