COAP:COAP-3000/week5: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 45: Line 45:
Also on codepen
Also on codepen
* https://codepen.io/collection/ifybJ/#
* https://codepen.io/collection/ifybJ/#
=== Simple example ===
<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");
                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>
</body>
</html>
</source>


== Wednesday ==
== Wednesday ==

Revision as of 22:15, 15 April 2018

COAP:COAP-3000
◀▬▬▶
⚐ ☸
⚒ 2018/04/15
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

<!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");
                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>
</body>
</html>

Wednesday

  • GSAP continued
  • Midterm (1hour)

Project 5

Create an animation with the GSAP library.

Requirements:

  • At least three animations
  • A start and a stop button for at least one animation.

Due:

  • Wednesday, week 6 before class
  • Upload to the worldclassroom
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-3000/week5&oldid=67513"