animatin margin

[amigoface]

hi,

since it could be simple response i didnt create a codepen

 

so i am animating an element that have this class

.dlg {
	top: 50% !important;
	left: 50% !important;
	margin: -105px 0 0 -150px;
	width: 300px;
	height: 210px;
}

  var tm = new TimelineMax();
  tm.to(".dlg", 0.15, { width: screen.width - 20, height: screen.height - 20 });

is it possible to animate the margin at the same time to keep the elemnt screen centered, or maybe there is another way to achive this ?

 

thanks and good day

[Diaco]

Hi amigoface 

 

you can animate css margin property easily like this :

TweenMax.to(".myClass",1, { ....... , margin:'10 0 0 40' });

[amigoface]

since the margin is depending on screen size, how to replace hard coded value with calculated one ?

something like

-((screen.height - 20) / 2 ),0,0, -((screen.width - 20) / 2 )

[Diaco]

pls try this :

TweenMax.to(".dlg", 4, {.... , margin:-((screen.height-20)/2)+'px 0px 0px '+-((screen.width-20)/2)+'px'});

and i think that's better if you provide a Codepen demo

[amigoface]

i definitively dont need codepen for this, everything work now

 

many thanks

[amigoface]

btw there is some bug in the forum ,

 

when i quick reply i have this page

 

 

however the response is correctly posted