How to use TweenMax Animation?

In this article, I will show you how to use TweenMax animation! so let’s start.

Step 1: Animation Library

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>

Step 2: HTML Code

<div class="example-area">
	<div class="example-image-1" data-speed="0.06" data-revert="true">
		<img src="assets/images/image-1.png" alt="image">
	</div>
	<div class="example-image-2" data-speed="0.08" data-revert="true">
		<img src="assets/images/image-2.png" alt="image">
	</div>
</div>

Step 3: JS Code

// TweenMax JS
$('.example-area').mousemove(function(e){
	var wx = $(window).width();
	var wy = $(window).height();
	var x = e.pageX - this.offsetLeft;
	var y = e.pageY - this.offsetTop;
	var newx = x - wx/2;
	var newy = y - wy/2;
	$('.example-image-1, .example-image-2').each(function(){
		var speed = $(this).attr('data-speed');
		if($(this).attr('data-revert')) speed *= -1;
		TweenMax.to($(this), 1, {x: (1 - newx*speed), y: (1 - newy*speed)});
	});
});

That’s all! If you have any queries, then let me know in the comment section.

Bonus: Are you looking for the latest WordPress themes?