Jump to content
Search Community

Accordian with GSAP

LewisOne test
Moderator Tag

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

I've been looking for a better way to code and animate Accordian's to unleash some creativity.  I've been playing around with GSAP a lot lately trying to do some of the cool animation effects I have liked in flash using GS), and making them browser compatible.

 

I thought of a cool way to do accordians that you have total visual control over.  All of the other JavaScript one's or the SPRY assets that I have used in the past, have been very confusing and not very graphically customizable -as well as not very browser friendly.

 

This is my start of one that I feel can go just about anywhere, in any direction (including diagonal) thanks to Mr. Green.  I used super simple CSS.  I added in an alpha change because the objects inside of the div would stay visible and cover stuff, but there is probably a much better way to do it.

 

Here is the start of the simple code I came up with so far, let me know what you think:

 

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>

<style type="text/css">
.containers {
    /* [disabled]margin: 10px; */
    /* [disabled]float: left; */
    height: 507px;
    width: 421px;
    position: absolute;
    background-color: #0F0;
    display: inline-table;
    white-space: normal;
}
.boxes {
    background-color: #FFF;
    float: left;
    height: 50px;
    width: 400px;
    position: relative;
    margin-right: auto;
    margin-left: 10px;
}
</style>
</head>

<body>
<div class="containers">
  <div class="boxes" id="a">
    <div align="center">a</div>
  </div>
  <div class="boxes" id="a1">
    <div align="center">a-1</div>
  </div>
  <div class="boxes" id="b">
    <div align="center">b</div>
  </div>
  <div class="boxes" id="b1">
    <div align="center">b-1</div>
  </div>
  <div class="boxes" id="c">
    <div align="center">c</div>
  </div>
  <div class="boxes" id="c1">
    <div align="center">c-1</div>
  </div>
</div>


<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/greensock/minified/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript" src="js/greensock/minified/easing/EasePack.min.js"></script>
<script type="text/javascript" src="js/greensock/minified/TweenLite.min.js"></script>
<script type="text/javascript" src="js/greensock/minified/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript" src="js/greensock/minified/plugins/CSSRulePlugin.min.js"></script>

<!--start events-->
<script>
$(document).ready(function () {
     TweenLite.to(a1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut});
     TweenLite.to(b1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut});
     TweenLite.to(c1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut});
});

$("#a").click(function() {
    TweenLite.to(a1, 1, {css:{height:50, alpha:1}, ease:Cubic.easeOut});
    TweenLite.to(b1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut});
    TweenLite.to(c1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut});
});
$("#b").click(function() {
    TweenLite.to(a1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut});
    TweenLite.to(b1, 1, {css:{height:50, alpha:1}, ease:Cubic.easeOut});
    TweenLite.to(c1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut});
});
$("#c").click(function() {
    TweenLite.to(a1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut});
    TweenLite.to(b1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut});
    TweenLite.to(c1, 1, {css:{height:50, alpha:1}, ease:Cubic.easeOut});
});


</script>
</body>
</html>
 

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.
×
×
  • Create New...