How resize and update square block animation

[chiho]

$(document).ready(function() {
	$(".client-logo").each(function(element) {
		TweenMax.defaultEase 	= Linear.easeNone;
		var tl 					= new TimelineMax({ onUpdate:updateUI,  repeatDelay: 0, paused:true, repeat: -1 });    

		var tlWidth 			= $('.image-client-inner').innerWidth();
		var tlHeight 			= $('.image-client-inner').innerHeight();
		var tlMargin 			= 10;

		tl.to(element.previousElementSibling, 0.58, {left: tlWidth-tlMargin}).
			to(element.previousElementSibling, 0.58, {top: tlHeight-tlMargin}).
			to(element.previousElementSibling, 0.58, {left: 0-tlMargin}).
			to(element.previousElementSibling, 0.58, {top:  0-tlMargin});
			
			element.animation = tl;

		})

		$(".client-logo").hover(over, out);
		
		function over() {
			this.animation.resume();
			console.log(this.animation);
		}

		function out() {
			this.animation.pause();
		}
		
		function updateUI()
		{
		//	alert('done');
		}	
});

When the window is resizing, the animation should be repositioning themselves correctly. How should I do that properly?

 

[PointC]

We've had several discussions about responsive animations. You can use the forum search feature to find several threads. Here are a few to get you started.

 

Happy tweening.