Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  
LewisOne

Accordian with GSAP

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 post
Share on other sites
.boxes { overflow:hidden }

will keep the contents inside when you change the height.

  • Like 1
Link to post
Share on other sites

Hahaha, very nice.  And I'm here trying to make it even more coplicated.  Works great.  Thanks Dude.

Link to post
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
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×