COAP:COAP-3000/week5

The educational technology and digital learning wiki
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.
COAP:COAP-3000
◀▬▬▶
⚐ ☸
⚒ 2018/05/16
Objectives
  • create animations with GSAP
  • use jQuery to get a handle on elements

Objectives

  • create animations with GSAP
  • use jQuery to get a handle on elements



Monday

The GSAP library

The GreenSock Animation Platform (GSAP) is a powerful and relatively easy to use suite of animation libraries for HTML5. As of April 2018, it includes:

  • TweenLite -handles animating just about any property of any object.
  • TweenMax - adds some extras.
  • TimelineLite a container for tweens to control them as a whole and precisely manage their timing in relation to each other
  • TimelineMax - adds some extras.

In this class, we will work with TweenMax.

  • Either download it from here or
  • include the library as CDN, like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>

Creating animations with TweenMax and TweenLite

There are are two ways of creating animations:

  • Use a simple static method like Tweenlite.to . e..g
TweenLite.to(thing, 2, {left:"542px"});
  • Create a tweening object that you then can control with various methods.
var tween = new TweenLite (thing, 2, {left:"542px"});  
tween.play();

Hands on

Also on codepen

Simple example

Also: https://codepen.io/danielkschneider/pen/LdKKLx 

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>GreenSock: Animate Multiple Properties</title>

    <style>
        body {
            background-color: #000;
        }

        #demo {
            width: 692px;
            height: 70px;
            background-color: #333;
            padding: 8px;
        }

        #logo {
            position: relative;
            width: 150px;
            height: 60px;
            /* background: #90E500 url(img/logo_transparent.png) no-repeat; */
            background-color: green;
            color: #000;
            font-family: Arial, Helvetica, sans-serif;
            border-bottom: solid #000 10px;
        }

        #logo p {
            margin-top: 0px;
            margin-left: 50px;
            line-height: 60px;
        }

    </style>
</head>

<body>
    <div id="demo">
        <div>
            <input id="btn" type="button" value="click" />
            <input id="btn2" type="button" value="back" />
        </div>
        <div id="logo">
            <p>COAP 3000</p>
        </div>

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

        <script>
            //we'll use a window.onload for simplicity, but typically it is best to use either jQuery's $(document).ready() or $(window).load() or cross-browser event listeners so that you're not limited to one.
            window.onload = function() {
                var logo = document.getElementById("logo");
                var btn = document.getElementById("btn");
                var btn2 = document.getElementById("btn2");
                btn.onclick = animate;
                btn2.onclick = animateback;
            };

            function animate() {
                TweenLite.to(logo, 2, {
                    left: "542px",
                    backgroundColor: "black",
                    borderBottomColor: "#90e500",
                    color: "white"
                });
            }

            function animateback() {
                // using object syntax
                var motion = new TweenLite(logo, 2, {
                    left: "0px",
                    backgroundColor: "red",
                    borderBottomColor: "#90e500",
                    color: "white",
                    rotation: "180"
                });
                motion.play();
                var motion2 = new TweenLite(logo, 2, {
                    rotation: "360",
                    backgroundColor: "green"
                });
                // add motion 2 after motion 1
                motion2.delay(3);
            
            }

        </script>
  </div>
</body>
</html>

Wednesday

  • GSAP continued
  • Midterm (1hour)

Motion animation with GSAP

HTML fragment 

<div id="universe">
  <img id="mc" src="https://openclipart.org/download/261329/Rocket-ship-Clip-Art.svg" height="100px" alt="a rocket" />
  <div id="pad"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>

CSS: 

#universe {
  position: absolute;
  background-color: lightblue;
  height: 400px;
  width: 800px;
}

#mc {
  position: absolute;
  top: 290px;
  left: 10px;
}

#pad {
  position: absolute;
  top: 390px; left:10px;
  background-color: green;
  height: 10px;
  width: 2cm;
}

JavaScript: 

var rocket = document.getElementById("mc");
console.log("rocket=", rocket);
var anim = new TweenMax(rocket, 10, {
  bezier: {
    autoRotate: false,
    values: [
      { x: 20, y: -300 },
      { x: 99, y: -223 },
      { x: 200, y: -89 },
      { x: 300, y: -231 },
      { x: 400, y: -99 },
      { x: 500, y: -217 },
      { x: 500, y: 0}
    ]
  },
  paused: true,
  ease: Bounce.easeOut
});

rocket.onclick = function() {
  anim.restart();
  console.log("clicked rocket");
};

document.getElementById("pad").onclick = function() {
  console.log("clicked pad");
  TweenMax.to(mc, 5, { x: 0, y: 0});
};

Project 5

Create an animation with the GSAP library.

Code reuse:

  • You are allowed to reuse code from other developers under the condition that you cite the source, that you make adaptations and that you understand what the code does.

Requirements:

  • At least three animations
  • A start and a stop button for at least one animation.
  • A report in video or text format

Due:

  • Wednesday, week 6 before class
  • Upload to the worldclassroom

Links

Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-3000/week5&oldid=67809"