question about animation (teeboard)

rigz · June 3, 2014

Hi all, a guy who i know ( he is the creator of teeboard) told me to visit this forum and look what is possible with JS and i am impressed by the demo's i saw here.

I dont know allot about JS yet but i will try to learn some things every day

i want to rotate this image or do another fun animation, the following script comes in from left to right and all is working good but i want to update this animation a little by adding some "cool" JS things

I wanna learn by adding into this script some things do it will allow me to learn more about JS

can u guys give me a push in the righ direction ?

thanks in advance

kevin

the script:

<head>
<title>Twitchboard Notifications</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />




<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>

<style type="text/css" media="all">
html, body {
   height: 100%;
   /*background-color: #FFFFFF;*/
   background-color: rgba(255,255,255,0)!important;
}

body {
   margin: 0;
   padding: 0;
   overflow: hidden;
}

#flashContent {
   width: 200px;
   height: 100px;
}

#notification-msg {
   color: #6495ED;
   font-size: 24px;
   font-family: Tahoma, Geneva, sans-serif;
   font-weight: bold;
   text-transform: uppercase;
   position: relative;
   top: 50px;
   left: 50px;
}

#notification {
   left: 0px;
   top: 0px;
}

</style>

<script>

function teeboardNotification(type, msg) {
   //alert("notification: " + type + " - " + msg);

   var txt = document.getElementById("notification-msg");
   txt.innerHTML = msg;

   var div = document.getElementById("notifcation");
   div.style.visibility = "visible";
   TweenLite.killTweensOf(div);
   TweenLite.fromTo(div, 0.6, {x:-920}, {x:0, onComplete:hideNotification});
TweenLite.fromTo(div, 0.6, {y:-400}, {y:0});
}

function hideNotification() {
   var div = document.getElementById("notifcation");
   TweenLite.to(div, 0.6, {x:-920, delay:5});
}

</script>

</head>
<body>



<div id="notifcation" style="visibility:hidden">
<div id="notification-msg">
        TEEBOARD JAVASCRIPT NOTIFICATIONS!!
   </div>
<img src="images/notification-bg.png" width="920" height="110">
</div>

<div id="flashContent">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="200" height="100" id="teeboard-notifications" align="middle">
    <param name="movie" value="teeboard-notifications.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#ffffff" />
    <param name="play" value="true" />
    <param name="loop" value="false" />
    <param name="wmode" value="transparent" />
    <param name="scale" value="noscale" />
    <param name="menu" value="false" />
    <param name="devicefont" value="false" />
    <param name="salign" value="lt" />
    <param name="allowScriptAccess" value="always" />
    
    <object type="application/x-shockwave-flash" data="teeboard-notifications.swf" width="200" height="100">
      <param name="movie" value="teeboard-notifications.swf" />
      <param name="quality" value="high" />
      <param name="bgcolor" value="#ffffff" />
      <param name="play" value="true" />
      <param name="loop" value="false" />
      <param name="wmode" value="transparent" />
      <param name="scale" value="noscale" />
      <param name="menu" value="false" />
      <param name="devicefont" value="false" />
      <param name="salign" value="lt" />
      <param name="allowScriptAccess" value="always" />
    </object>
    
</object>
</div>

</body>
</html>

Carl · June 3, 2014

Hi and welcome to the GreenSock forums,

Glad to hear you are learning JavaScript and GSAP.

Its kind of tough to read a bunch of pasted html, css and javascript which is why we recommend that you create separate CodePen demo which it makes it very easy for us to test and edit your code. Basically you just paste your css, js and html into the online CodePen editor and it all works.

Instructions here: http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

Since your code is relatively simple, I went ahead and did it for you:

demo: http://codepen.io/GreenSock/pen/mwidL

Notice that I removed the all that flash code and edited the JavaScript slightly.

If seems that for the most part you had it working pretty well. Congratulations.

I added 2 buttons which allow you to test 2 different notification messages.

---

In order to do more elaborate animations that include multiple effects sequenced together, I would suggest using a TimelineLite or TimelineMax. This way you can create 1 animation sequence and just restart it each time a new notification needs to be displayed, in addition to changing the text.

I did a really quick example here:

http://codepen.io/GreenSock/pen/JwFcv

I can't explain all the details of TimelineLite at the moment, but you should definitely watch this video: http://www.greensock.com/sequence-video/ and read the TimelineLite docs.

hopefully this helps to give you some ideas.

rigz · June 3, 2014

timelinelite all the way ! thanks for the update

Notifications

Messages

question about animation (teeboard)

Warning: Please note

Recommended Posts

rigz

Link to comment

Share on other sites

Carl

Link to comment

Share on other sites

rigz

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members