You do not have permission to edit this page, for the following reason:
Free text:
== 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: * [https://greensock.com/docs/#/HTML5/GSAP/TweenLite/ TweenLite] -handles animating just about any property of any object. * [https://greensock.com/docs/#/HTML5/GSAP/TweenMax/ TweenMax] - adds some extras. * [https://greensock.com/docs/#/HTML5/GSAP/TimelineLite/ TimelineLite] a container for tweens to control them as a whole and precisely manage their timing in relation to each other * [https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/ TimelineMax] - adds some extras. In this class, we will work with TweenMax. * Either download it from [https://greensock.com/tweenmax here] or * 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"> var tween = new TweenLite (thing, 2, {left:"542px"}); tween.play(); </source> === 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 == * 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.
Save page Show preview Show changes Cancel