Jump to content
GreenSock

rigz

question about animation (teeboard)

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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" />

<!-- visit http://www.greensock.com/get-started-js/ for more info -->

<!--CDN links for the latest TweenLite, CSSPlugin, and EasePack -->
<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>

<!--
Animations should take no longer than 10 seconds (showing + hiding), as notifications are queued,
meaning that if there are 2 new followers, 2 alerts are invoked, 10 seconds apart.
-->

<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" />
    <!--[if !IE]>-->
    <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>
    <!--<![endif]-->
  </object>
</div>


</body>
</html>
 

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

timelinelite all the way ! thanks for the update

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×