<div class="box green"></div>
<div class="box orange"></div>
<div class="box grey"></div>
/* Global styles come from external css https://codepen.io/GreenSock/pen/JGaKdQ*/

body {
  margin-top: 50px;
  text-align: center;

.box {
  display: inline-block;
  margin-right: 5px;

.pink {
  background-color: pink;
// register the effect with GSAP:
    name: "fade",
    defaults: {duration:2}, //defaults get applied to the "config" object passed to the effect below
    effect: (targets, config) => {
        return gsap.to(targets, {duration: config.duration, opacity:0});

// now we can use it like this:

// Wait a bit and override the defaults:
gsap.delayedCall(3, () => gsap.effects.fade(".orange", {duration: 1}) );

document.querySelector(".grey").addEventListener("mouseenter", e => gsap.effects.fade(e.target)); 
Run Pen

External CSS

  1. https://codepen.io/GreenSock/pen/JGaKdQ.css

External JavaScript

  1. https://assets.codepen.io/16327/gsap-latest-beta.min.js?r=3.11.2d