COAP:COAP-3000/week5: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
 
(17 intermediate revisions by the same user not shown)
Line 2: Line 2:
|is_part_of_syllabus=COAP:COAP-3000
|is_part_of_syllabus=COAP:COAP-3000
|do_not_show_sub_page=No
|do_not_show_sub_page=No
|page_previous=COAP:COAP-3000/week3
|page_previous=COAP:COAP-3000/week4
|page_next=COAP:COAP-3000/week5
|page_next=COAP:COAP-3000/week6
|tba
|objective=create animations with GSAP,
use jQuery to get a handle on elements
|cat_syllabus=COAP-3000
|cat_syllabus=COAP-3000
}}
}}
== Monday ==
== Monday ==


=== Creating animations with the GSAP library ===
=== 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:
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:
Line 20: Line 20:
In this class, we will work with TweenMax.
In this class, we will work with TweenMax.


* Either download it from [ here] or
* Either download it from [https://greensock.com/tweenmax here] or
* include the library as CDN, like this:
* include the library as CDN, like this:
<source lang="HTML5">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
</source>
=== Creating animations with TweenMax and TweenLite ===
There are are two ways of creating animations:
* Use a simple static method like <code> Tweenlite.to </code>. e..g
<source lang="JavaScript">
TweenLite.to(thing, 2, {left:"542px"});   
</source>
* Create a tweening object that you then can control with various methods.
<source lang="JavaScript">
<source lang="JavaScript">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
var tween = new TweenLite (thing, 2, {left:"542px"}); 
tween.play();
</source>
</source>


=== Hands on ===
=== Hands on ===
* https://greensock.com/jump-start-js
Also on codepen
* https://codepen.io/collection/ifybJ/#
=== Simple example ===
Also: https://codepen.io/danielkschneider/pen/LdKKLx
<source lang="HTML5">
<!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>
</source>


== Wednesday ==
== Wednesday ==
* GSAP continued
* Midterm (1hour)
=== Motion animation with GSAP ===
* https://codepen.io/danielkschneider/pen/EEqeJE
HTML fragment
<source lang="HTML5">
<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>
</source>
CSS:
<source lang="HTML5">
#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;
}
</source>
JavaScript:
<source lang="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});
};
</source>
== 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 ==
* [https://greensock.com/docs Documentation home]
* [https://greensock.com/get-started-js Getting Started with GSAP (GreenSock Animation Platform)], including the [https://greensock.com/jump-start-js JumpStart GSAP JS] shown in class.
* [https://greensock.com/blog/ Blog] (includes tips and examples)
* [https://greensock.com/ease-visualizer Ease visualizer]. Allows picking an easing function.

Latest revision as of 18:05, 16 May 2018

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"