tweenmax and screen orientation

[spica2]

I am using some fromto css animations. gsap writes the css as inline styles, eg relative margin informations to absolute pixel margins. when I change the windowsize or change the orientation on a smart device my design is broken, because the absolute pixels do not fit to the new window dimension.

 

Is there a general concept to deal with that?

[Diaco]

Hi spica2 

 

Pls make a reduced Codepen Demo available . 

 

any way , i think this can help you : GSAP Responsive Solutions

[spica2]

Thanks. That helped. A bit

 

It deals responive positioning with gsap. But still the problem, what if the script is already running with its calculated measuments and a new mediaquery gets in action (e.g. device rotation) with other styles, e.g. you want to switch from a centered to left aligned.

[Diaco]

if i understood correctly and you want to re set a tween's property ,  you need .invalidate() ( same usage for tweens and Timelines )

 

pls check this Codepen Demo : 

See the Pen bddvgy by MAW (@MAW) on CodePen

 

var Tween = TweenMax.to(".red",2,{x:100});

var tl = new TimelineMax({repeat:-1});
tl.add(Tween)
  .to(".blue",2,{x:100});

$("#change").on("click", function() {
  Tween.vars.css.x = 500;
  tl.seek(0).invalidate().restart();})

 

otherwise ,  i think that's better to provide a reduced Codepen Demo 

});