Molt

The reason I was using 'em' rather than 'rem' was twofold- I didn't control the base HTML (Only the div overlaying the video), and I needed to support variant font sizes based on factors such as the screen size, viewer distance, and any eyesight issues. It was never perfect to be honest, and was a hangover from an earlier (non-Greensock) version of my project. I have been playing round with the X,Y based approach today though and it seems to work nicely. I'm basically still allowing percentage (based on the video size), pixel, and what I'm now calling 'Accessibility scale' to be combined- but now just working on converting them to px and feeding them into the X,Y rather than left, right, top and bottom. I now have a label happily tracking an item on the video, scale changing as the 'Accessibility scale' slider is moved. Subtitles are correctly positioned and working, and it all works on different devices and fullscreening. Meanwhile a logo sits there, not rescaling since that'd be silly. Thanks folks, problem solved.

Thanks for the feedback folks, I'll look into what I can do with the x,y parameters. As Shaun hinted towards a lot of the problems I'm having are due to responsive, or in this case semi-responsive, layout systems. There are times when elements need to be handled as percentages (A lot of standard layouts such as team listings for sports, or when you want to attach a label to something on the graphic), but there are also times when the font-size is the important factor such as when dealing with accessible subtitles.

Thanks for the quick response, it's much appreciated. Unfortunately while this works in a lot of use cases it loses the ability to specify units in the relative offset, and I do need that. What I'm writing is an authoring system for video overlays, and for this I do need to allow things to be positioned in mixed units. For the initial position of things I can get around this and say 'Position this item at the center of the screen, now move it down by 2em and right by 40px' as two separate tweens (as in the original Codepen), but I can't use this for 'I want this item to move to a position 2em down and 40px from the center of the screen'. I think I can work round this by: Store the initial position of an item Tween the item immediately to the target position Find the pixel position of the object Convert to percentage to allow the video to be fullscreened/resized while tweening Move the item immediately back to it's origin Add a timed tween to move the item to the computed position This does feel like a serious hack though and likely to come back and bite me (I'm also not sure the measurements will be right until the renderer actually moves the item, which would cause a nasty flicker), so I was just checking I wasn't missing a cleaner way using Greensock magic. I know it's asking a lot but so far I've been pleasantly surprised by what Greensock is capable of so thought I'd check.

Wtih Greensock it's easy enough to move something to the centre of the container by using... .to(".target", 1, { left:'50%', top:'50%', xPercent:'-50', yPercent:'-50' } ) Once it is positioned it can then be moved relative (in px, %, em, or whatever) by using.. .to(".target", 1, {left:'+=20px'}) But is there any way to combine these two positional transforms in one go and basically say 'Smoothly move this object to a point 20px right of the centre of screen'? I've tried a few attempts but nothing seems to be working. Do I need to fudge things by moving the object to the centre, applying the relative offset, getting the resultant transform, resetting the position to the original, and then tweening to the result or am I missing something? What I'd imagine would be the 'dream solution' would be something like: .to(".target", 1, { left:'50%+20px', top:'50%', xPercent:'-50', yPercent:'-50' } )