Jump to content


Gsap height animation

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

Please I need to advise on fixing this animation. I choose Gsap due to its amazing speed and smoothness  and I'd like some expertise to fix my animation.


Please click on product Sterilisers, it should expand the container pushing the content below down, like an accordion. 

See the Pen zPEayj?editors=1010 by davide77 (@davide77) on CodePen

Link to comment
Share on other sites

Hello @DD77 and welcome to the GreenSock Forum!


Unless i'm missing something, i am a little confused on what your GSAP related question is? When i look at your JS code i do not see any GSAP tweens or timelines. It looks like you are just adding removing classes to animate your elements.


Can you please provide some more info on how we can help you with GSAP since i do not see any GSAP code, thanks!

Link to comment
Share on other sites

@Jonathan hi, yes, sorry I modified the code and deleted it . 


  'expanded.RichTile': function(event, tile) {
    // disable siblings on expand
    var siblings = tile.element.siblings('.js-tile');
    console.log('click 1');
    TweenMax.from(".Tile.is-expanded .Tile-flyout", 0.8, { height:0 , opacity: 0, autoAlpha:0, ease: Power1.easeOut });
    // re-enable when this tile is collapsed
    tile.element.one('collapsed.RichTile', function() {
      console.log('click 2');
      TweenMax.from(".Tile-flyout", 0.8, { height: 0, opacity: 0, autoAlpha:1, ease: Power1.easeOut });

doesn't work at all 

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.