How to move tag elements using the JavaScript animation library TweenMax

There are various ways to create animations using JavaScript, but this time we will introduce how to move tag elements using an animation library called “TweenMax”.
By using animations, you can attract users’ attention and provide interactive experiences.
This guide will explain the process in detail, starting from basic CSS and HTML setup, and moving on to actually running animations with JavaScript.

CSS Settings for Tag Elements to be Animated

First, design the tag elements to be animated using CSS.
Here, we adjust the background color, size, and positioning to define the area where the animation will move.
Refer to the CSS code below.

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
  text-align: center;
}
h1{
  font-size:16px;
  text-align:center;
  font-weight:normal;
  padding:10px 0;
  position: relative;
}
.tmbtn{
    width: 200px;
    height: 80px;
    text-align: center;
    background-color: #333333;
    color:#ffffff;
    line-height: 80px;
    margin: 0 auto;
    cursor: pointer;
    font-weight: bold;
}
.wrap{
    width: 600px;
    margin: 40px auto 0 auto;
}
.box {
  width: 200px;
  height: 80px;
  margin: 20px;
  line-height: 80px;
  position: relative;
}
#pos{
    background: #007FFF;
}
#to{
    background: #7FFF00;
}
#frm{
    background: #FFFF26;
}
#frmto{
    background: #D24DFF;
}
</style>

In this code, the four tag elements #pos, #to, #frm, and #frmto are given different background colors so they can be easily distinguished.
The button with class .tmbtn is also centered and styled to be clickable.

HTML Structure for the Button and Animated Tag Elements

Next, set up the HTML for the button to start the animation and the elements to be moved.
The animation will start when the button is clicked.

<h1>Click the button below to move the tag elements using TweenMax JavaScript animation.</h1>

<div class="tmbtn">Click</div>

<div class="wrap">
    <div id="pos" class="box">TweenMax.set</div>
    <div id="to" class="box">TweenMax.to</div>
    <div id="frm" class="box">TweenMax.from</div>
    <div id="frmto" class="box">TweenMax.fromTo</div>
</div>

In this code, the four elements #pos, #to, #frm, and #frmto each perform a different animation.
The animation is triggered when the button with class .tmbtn is clicked.

JavaScript Implementation to Animate Tag Elements Using TweenMax

Here, we write the JavaScript code using TweenMax.
You need to load jquery-2.2.0.min.js and TweenMax.min.js in advance.
With these libraries, you can easily control animations.

<script src="./jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script type="text/javascript">
$(".tmbtn").click(function(){
    TweenMax.set('#pos',{left: 200});
    TweenMax.to('#to', 0.5, {left: 200});
    TweenMax.from('#frm', 0.5, {left: 200});
    TweenMax.fromTo('#frmto', 0.5, {left: 400}, {left: 200});
});
</script>

This script specifies the following four different animations:

1. TweenMax.set – Instantly moves the #pos element to the specified position.
2. TweenMax.to – Moves the #to element to the target position over 0.5 seconds.
3. TweenMax.from – Animates the #frm element from the specified position to the current position over 0.5 seconds.
4. TweenMax.fromTo – Moves the #frmto element from the specified position to the target position over 0.5 seconds.

By combining these animations, you can create dynamic movements and visually appealing effects for your users.

Demo Page Using TweenMax JavaScript Animation Library

If you want to try running this code yourself, check out the demo page from the link below.
Experiencing the sample in action will give you a more intuitive understanding of how the animation works.

Demo of TweenMax JavaScript Animation Library

Summary

By using the TweenMax JavaScript animation library, you can easily implement complex animations.
In this example, we focused on moving tag elements, but TweenMax also offers various effects such as rotation, scaling, and fade-in/out.
Effectively using animations can help you create more attractive websites.

　
*Please use this information at your own discretion.
Do not copy the Google Analytics tag in the head section of the demo page.