GSAP auto height on a accordion functionality

[DD77]

Hi YA,
I'm having so difficulties to make this functionality to work smoother and better. I need auto hight as my content is quite dynamic. 
When I click the height of the accordion fires but doesn't have and smoothens on the animation. What am I missing? 
Also is it done all ok overall? Would you change anything in there? 

Thanks,

D

 

$(".accordion-item .button").click(playAnimation);

  function playAnimation(event) {
    event.preventDefault(); 
     
    
    var $this = $(this).parent();
    var $thisContent = $this.find('.accordion-content .article');
    
    
    TweenLite.to($this,.3, {className: '-=expanded'});
    TweenMax.to($thisContent, .3,  {autoAlpha:0,ease: Sine.easeInOut,
        onComplete:function() {
            TweenMax.to($('.accordion-content .article'), .3, {height: "0",ease: Sine.easeInOut})
        }
    })
    
       if (!$this.hasClass('expanded')){
            var self = this;
            setTimeout(function() {
                theOffset = $(self).offset();
                $('body,html').animate({ scrollTop: theOffset.top - 56 });
            }, 310);

            TweenMax.to($(".accordion-item"), .3,  {className: '-=expanded', ease: Sine.easeInOut})
            TweenMax.to($this, .3,  {className: '+=expanded', ease: Sine.easeInOut})

            TweenMax.to($('.accordion-content .article'), .3,  {height: "0",autoAlpha:0, ease: Sine.easeInOut})
            TweenMax.to($thisContent, .3,  {height: "auto", ease: Sine.easeInOut,
            onComplete:function() {  
                TweenMax.to($('.accordion-content .article'), .3, {autoAlpha:1,ease: Sine.easeInOut})
            }
        })
       } 
     
  } 

 

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

[Shaun Gorneau]

Hi @DD77

 

Heights are tricky! I've always found it easiest when tweening from 0 up to a non-specified height to immediately .set( element , {height: 0} ) and tween .from( element , {height: 0} )

 

Have a look here. Hope it helps!

 

See the Pen abbmmGQ by sgorneau (@sgorneau) on CodePen

[ZachSaucier]

Hey DD77. 

 

Currently you can't tween to a value of "auto". Instead, you should use a .set() to the "auto" value then immediately use a .from() a value of 0.

 

However, you currently have some conflicting tweens. You're trying to close all of the options and then open the clicked one at the same time. You need to change your logic so that the tweens don't conflict.

 

Other notes:

• You don't need to use a jQuery selector in your tweens. By default selector strings are parsed using JavaScript's .querySelectorAll() method.
• You should avoid using jQuery's animate. Plus it doesn't work with GSAP's scrollTo plugin.

See the Pen bGGwwmq?editors=0010 by GreenSock (@GreenSock) on CodePen

 

P.S. The next version of GSAP currently has a way to tween to a value of "auto" built in  

[DD77]

46 minutes ago, Shaun Gorneau said:

Hi @DD77

 

Heights are tricky! I've always found it easiest when tweening from 0 up to a non-specified height to immediately .set( element , {height: 0} ) and tween .from( element , {height: 0} )

 

Have a look here. Hope it helps!

 

 

 

Thank you so much!!!!!!

[DD77]

48 minutes ago, ZachSaucier said:

Hey DD77. 

 

Currently you can't tween to a value of "auto". Instead, you should use a .set() to the "auto" value then immediately use a .from() a value of 0.

 

However, you currently have some conflicting tweens. You're trying to close all of the options and then open the clicked one at the same time. You need to change your logic so that the tweens don't conflict.

 

Other notes:

• You don't need to use a jQuery selector in your tweens. By default selector strings are parsed using JavaScript's .querySelectorAll() method.
• You should avoid using jQuery's animate. Plus it doesn't work with GSAP's scrollTo plugin.

 

 

 

P.S. The next version of GSAP currently has a way to tween to a value of "auto" built in  

any reaso why the TweenMax.to(window, 1, { scrollTop: theOffset.top - 56 }); isn't working now? 

[GreenSock]

10 minutes ago, DD77 said:

any reaso why the TweenMax.to(window, 1, { scrollTop: theOffset.top - 56 }); isn't working now? 

You should always use the ScrollToPlugin for scrolling because there are various differences among browsers. For example, in many browsers you can't set the scrollTop property on the window element - you literally must call window.scrollTo() method. GSAP's ScrollToPlugin handles all that for you. 

[ZachSaucier]

2 hours ago, DD77 said:

any reaso why the TweenMax.to(window, 1, { scrollTop: theOffset.top - 56 }); isn't working now?

In case it wasn't clear from Jack's post, changing scrollTop to scrollTo fixes it  
I updated the demo.