GSAP Crash Course

27:"/_next/static/immutable/chunks/3fow3tmdkgy9m.js" 28:I[69319,["$3","$1f","$27"],"ChapterView"] 26:T652,{"@context":"https://schema.org","@graph":[{"@type":"LearningResource","@id":"https://learn.dimaac.com/gsap/07-eases#lesson","name":"GSAP Eases","description":"Chapter 8 of the free GSAP crash course for absolute beginners: a live demo and the full code.","url":"https://learn.dimaac.com/gsap/07-eases","image":"https://dimaac.com/files/og/gsap-07-eases.png","learningResourceType":["Tutorial","Code example"],"educationalLevel":"Beginner","isAccessibleForFree":true,"inLanguage":"en","teaches":"GSAP: Eases","isPartOf":{"@id":"https://learn.dimaac.com/gsap#course"},"position":8},{"@type":"SoftwareSourceCode","name":"GSAP Eases example","programmingLanguage":"JavaScript","runtimePlatform":"Web browser","codeSampleType":"full solution","url":"https://learn.dimaac.com/gsap/07-eases/demo/","text":"gsap.to(\".box-1\", { x: 600, duration: 2, ease: \"none\" });\ngsap.to(\".box-2\", { x: 600, duration: 2, ease: \"power1.out\" });\ngsap.to(\".box-3\", { x: 600, duration: 2, ease: \"power2.out\" });\ngsap.to(\".box-4\", { x: 600, duration: 2, ease: \"power4.inOut\" });\ngsap.to(\".box-5\", { x: 600, duration: 2, ease: \"back.out\" });\ngsap.to(\".box-6\", { x: 600, duration: 2, ease: \"elastic.out\" });"},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"DiMaac","item":"https://dimaac.com/"},{"@type":"ListItem","position":2,"name":"Learn","item":"https://learn.dimaac.com/"},{"@type":"ListItem","position":3,"name":"GSAP crash course","item":"https://learn.dimaac.com/gsap"},{"@type":"ListItem","position":4,"name":"Eases","item":"https://learn.dimaac.com/gsap/07-eases"}]}]}29:Tb93,

gsap.to(".box-1", { x: 600, duration: 2, ease: "none" });
gsap.to(".box-2", { x: 600, duration: 2, ease: "power1.out" });
gsap.to(".box-3", { x: 600, duration: 2, ease: "power2.out" });
gsap.to(".box-4", { x: 600, duration: 2, ease: "power4.inOut" });
gsap.to(".box-5", { x: 600, duration: 2, ease: "back.out" });
gsap.to(".box-6", { x: 600, duration: 2, ease: "elastic.out" });

2a:T892,

<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>
<div class="box box-6"></div>

2b:T9cf,

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #f4f4ef;
}

.box {
  width: 100px;
  height: 100px;
  margin-right: 600px;
  background: #0ae448;
  border-radius: 12px;
}

2c:T4b1, GSAP Crash Course

2d:T2989,

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GSAP Crash Course</title>
  <style>
    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-items: center;
      background: #f4f4ef;
    }

    .box {
      width: 100px;
      height: 100px;
      margin-right: 600px;
      background: #0ae448;
      border-radius: 12px;
    }
  </style>
</head>
<body>
  <div class="box box-1"></div>
  <div class="box box-2"></div>
  <div class="box box-3"></div>
  <div class="box box-4"></div>
  <div class="box box-5"></div>
  <div class="box box-6"></div>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
  <script>
    gsap.to(".box-1", { x: 600, duration: 2, ease: "none" });
    gsap.to(".box-2", { x: 600, duration: 2, ease: "power1.out" });
    gsap.to(".box-3", { x: 600, duration: 2, ease: "power2.out" });
    gsap.to(".box-4", { x: 600, duration: 2, ease: "power4.inOut" });
    gsap.to(".box-5", { x: 600, duration: 2, ease: "back.out" });
    gsap.to(".box-6", { x: 600, duration: 2, ease: "elastic.out" });
  </script>
</body>
</html>

22:[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"$26"}}],["$","section",null,{"className":"wrap lesson-head","aria-labelledby":"chapter-title","children":[["$","a",null,{"className":"g lesson-back","href":"https://learn.dimaac.com/gsap","children":["← ","GSAP crash course for absolute beginners"]}],["$","h1",null,{"id":"chapter-title","className":"page-title","children":"Eases"}],["$","p",null,{"className":"lesson-meta","children":[["$","span",null,{"className":"mono","children":["Chapter ",8," of ",15," · ","32:00"]}],null]}]]}],["$","section",null,{"className":"wrap","aria-label":"Demo and code","children":["$","$L28",null,{"src":"https://learn.dimaac.com/gsap/07-eases/demo/","title":"Eases","parts":[{"key":"js","label":"JavaScript","code":"gsap.to(\".box-1\", { x: 600, duration: 2, ease: \"none\" });\ngsap.to(\".box-2\", { x: 600, duration: 2, ease: \"power1.out\" });\ngsap.to(\".box-3\", { x: 600, duration: 2, ease: \"power2.out\" });\ngsap.to(\".box-4\", { x: 600, duration: 2, ease: \"power4.inOut\" });\ngsap.to(\".box-5\", { x: 600, duration: 2, ease: \"back.out\" });\ngsap.to(\".box-6\", { x: 600, duration: 2, ease: \"elastic.out\" });","html":"$29"},{"key":"html","label":"HTML","code":"

","html":"$2a"},{"key":"css","label":"CSS","code":"body {\n margin: 0;\n min-height: 100vh;\n display: grid;\n place-items: center;\n background: #f4f4ef;\n}\n\n.box {\n width: 100px;\n height: 100px;\n margin-right: 600px;\n background: #0ae448;\n border-radius: 12px;\n}","html":"$2b"},{"key":"file","label":"Whole file","code":"$2c","html":"$2d"}],"libs":["GSAP 3.13.0"]}]}],"$L2e"]