Great, I think I'll start with trying the modifier plugin method, as I have other more complex animations that may need this approach.
Also the other method of creating a new tween at the same progress(), I'd have to get my head around how this would work with Scrollmagic scenes. I assume I would have to also destroy and re-create the scrollmagic scene and re-add the timeline. But don't know if there's a way to add an in progress tween... So using modifiers is sounding a bit nicer at the moment..
I just worked out what I was doing wrong with modifiers method, I was doing this, which was making it jump to the values
tl.to($logo, 0.8, {scale: 0.6, y: 1, modifiers: { y: function(y){return $(window).width() >= 1000 ? -10 : 40}}, repeat: -1, yoyo: true }, "start");
I needed to do this to make it tween properly
tl.to($logo, 0.8, {scale: 0.6, y: 1, modifiers: { y: function(y){return $(window).width() >= 1000 ? y * -10 : y * 40}}, repeat: -1, yoyo: true }, "start");
Here's the working Codepen
CSS vars thing looks cool, unfortunately my project needs to work in IE11 too so will have to think about that one
Great info, Cheers!!!