GSAP Timelines

by the_voder

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<!-- 
You must link to the GSAP library in a <script> tag in the <head> section of your HTML document in order to use the library.
CDNJS provides the below tag:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-->

<img id="cog1" class="cogs" src="https://e7.pngegg.com/pngimages/921/11/png-clipart-computer-icons-gear-sprocket-european-style-wedding-logo-free-s-miscellaneous-desktop-wallpaper.png" alt="cog graphic">
<img id="cog2" class="cogs" src="https://e7.pngegg.com/pngimages/921/11/png-clipart-computer-icons-gear-sprocket-european-style-wedding-logo-free-s-miscellaneous-desktop-wallpaper.png" alt="cog graphic">

<!-- For accessibility, it's good to use a button to trigger an on-page action (you can use CSS to make chanage the appearance of the button) -->
<button id="playbutton">Play Animation</button>

CSS

.cogs {
  position: absolute;
  width: 10vw;
  height: auto;
  border-radius: 50%;
}

#playbutton {
    position: absolute;
    z-index: 99;
}

JavaScript

/*
Animate multiple HTML elements using the GSAP animation library

GSAP docs:
https://gsap.com/resources/
*/

// Create GSAP timeline
// GSAP Tiemline docs:
// https://gsap.com/docs/v3/GSAP/Timeline
let tl = gsap.timeline();

// Pause timeline otherwise it will run automatically on page-load
tl.pause();

// Add animatiion of first cog to timeline (starting at 0 seconds)
// We use the timeline's "fromTo()" function to set initial (from) values and ending (to) values
// From and To values are bundled together in curly brackets {}
// Note use of "vw" unit. "vw" is percentage of browser window width, allowing elements to be scaled and positioned responsively.
// Number at end is Position in timeline to add animation (0 sets to beginning of timeline)
// GSAP fromTo() docs:
// https://gsap.com/docs/v3/GSAP/gsap.fromTo()
tl.fromTo("#cog1", {
  // Properties and values set in this object define starting (from) values of animation
  // Note we have to put values with units in "quotes" (in this case we're using the vw (viewport width) unit). Unitless values don't need to be wrapped in quotes
  x: "-12vw",
  y: "-12vw",
  width: "10vw",
  rotation: 180
}, {
  // We define ending (to) values here
  x: 0,
  y: 0,
  width: "50vw",
  rotation: 0,
  duration: 1,
  ease: "power2.out"
}, 0);

// Add animation for second cog (also starting at 0 seconds)
tl.fromTo("#cog2", {
  x: "100vw",
  y: "-12vw",
  width: "10vw",
  rotation: -180,
}, {
  x: 0,
  y: 0,
  width: "50vw",
  rotation: 0,
  duration: 1,
  ease: "power2.out"
}, 0);

// Animate second cog again (animating from current values, hence we use the timeline "to()" function instead of "fromTo()")
// We set timeline Position to 1 (absolute time of 1 second) to start animation after other animation has completed
// GSAP from() docs:
// https://gsap.com/docs/v3/GSAP/gsap.from()
tl.to("#cog2", {
  // We only need to define "to" values here
  width: "200vw",
  left: "-50vw",
  top: "-50vw",
  rotation: 180,
  duration: 1,
 ...