Gsap height animation

[DD77]

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

[Jonathan]

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!

[DD77]

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


 

$('.js-tile').richTile().on({
  'expanded.RichTile': function(event, tile) {
    // disable siblings on expand
    var siblings = tile.element.siblings('.js-tile');
    siblings.richTile('disable');
    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() {
      siblings.richTile('enable');
      console.log('click 2');
      TweenMax.from(".Tile-flyout", 0.8, { height: 0, opacity: 0, autoAlpha:1, ease: Power1.easeOut });
    });
  }
});

doesn't work at all