Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
DD77

GSAP auto height on a accordion functionality

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

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

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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 :) 

  • Like 3
Link to comment
Share on other sites

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!!!!!!

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

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. 

  • Like 2
Link to comment
Share on other sites

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.

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.
×