Jump to content
Search Community

GSAP collapsing/expanding hidden content

DD77 test
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

The animation is not like I want, it should have a typical collapsing expanding experience.

If you click the "Expand/collapse", you'll expand/collapse the content.

It doesn't have the expected animation of the height when is scaling , when I click close (X) it shold do the reversing animation.  Content should be pushed.

console.log('click 1'); 
      TweenMax.fromTo(".Tile.is-expanded .Tile-flyout", 0.8, { scaleY:0 ,transformOrigin:"center top", autoAlpha:0,   ease: Linear.easeNone }, {scaleY:1, autoAlpha:1,});
      TweenMax.fromTo(".Tile.is-expanded .Tile-flyout > *", 0.8, { scaleY:2,transformOrigin:"center bottom", ease: Linear.easeNone }, {scaleY:1,});

 

console.log('click 2');
      TweenMax.fromTo(".Tile .Tile-flyout", 0.8, { scaleY:1 ,transformOrigin:"center bottom", autoAlpha:1, ease: Linear.easeNone }, {scaleY:0, autoAlpha:0,});
      TweenMax.fromTo(".Tile .Tile-flyout > *", 0.8, { scaleY:2,transformOrigin:"center bottom", ease: Linear.easeNone }, {scaleY:1,});

 

Demo:

See the Pen GOdgzq?editors=0010 by davide77 (@davide77) on CodePen

 

Link to comment
Share on other sites

Hello @DD77 and Welcome to the GreenSock forum!

 

It looks like you are doing a lot of adding / removing CSS classes that set display block and none. That will cause conflicts with CSS and JS fighting to the death for control of animating elements. It would take a while just to remove some of your logic to make it work.

 

So the concept to play an animation and then reverse it, is just that. We wont need to create more tweens just to play back (reverse) the tweens. In GSAP this is down by just calling reverse() method. So in your case you might want to look into using a timeline for better control of your animation.

 

The below example just shows a simple scaleY animation that triggers on hover. Even though you are using a click event, the concept is the same! On hover in we play() the timeline. And when we hover out we reverse() the timeline.

 

Take a look at the below example just so you can see the concept of play() and reverse() in action.

 

See the Pen QOrjJj by jonathan (@jonathan) on CodePen

 

Also when using GSAP to associate a timeline with multiple elements you must store each timeline in each elements DOM node. This way you just call that timeline for that element once you click the trigger for that element.

 

Again the below example uses hover event as a trigger instead of click. But the concept is the same no matter what the event handler. So you will see that i store each elements timeline within a loop. And then when i trigger that elements event handler i get the timeline stored in the elements DOM node to either play or reverse() the animation. This way you are not creating extra tweens and timeline to just reverse what you first played. Does that make sense?

 

See the Pen KdYqWo by jonathan (@jonathan) on CodePen

 

I think if you cleanup your code with all those classes for display hide show, and use the GSAP concepts for play() and reverse(), it will make animating a toggle show / hide slide down much easier.

 

Happy Tweening! :)

  • Like 3
Link to comment
Share on other sites

@DD77 Yeah what i'm saying is that you should set it up differently with a timeline, to make it easier to maintain and animate. It will make your life easier to learn those concepts since your using the jQuery one() method inisde another event handler and binding that event over and over again on each click. Which is also creating unnecessary tweens on each click and then creates additional tweens when one() runs again. So the GSAP concept i shared above makes sure your only creating the tweens and / or timelines once to prevent bad performance and a smooth animation cross browser. Sometimes its frustrating to have to recode something but in that process you learn things that help you the next time you have to play an animation and have it reverse saving you time and insanity ;)

 

I'm sure there are others who might want to take a swing and go through all your logic and code to fix it. But i just dont have the time right now to go through everything else that is happening in your codepen. Maybe if you reduced it to just the GSAP part with a couple of elements, only the logic for the show and hide event handler, and the GSAP tweens. Then others or myself can take the time with just the animation your trying to achieve and not have to go through unnecessary parts that are not GSAP related. :)

  • Like 1
Link to comment
Share on other sites

OK @DD77 here it is working..

 

Now keep in mind that i had to change some CSS (SCSS) since most of the issue was due to your CSS and JS.. so here we go. ;)

 

As a rule of thumb when animating height that is not defined, you will need to set the overflow:hidden property since it is required so the browser can hide the overflow to animate the height properly. And the overflow:hidden property also tells the browser that your element has a defined shape for use with the height property, this is important for your element to animate height.

 

I ran each element in a loop and stored each timeline in the elements DOM node. Then in the event handler i get the timeline from the elements DOM node and either play() or reverse() the elements timeline. And keep in mind that in the TimelineMax() constructor that forward is NOT a valid property, i think you meant reversed: true.

 

See the Pen gXzgwd?editors=0110 by jonathan (@jonathan) on CodePen

 

I had to make it so the CSS had the following:

 

.Tile-flyout {
  /*display: none;*/ /* do not use it, causes issues for show hide and calculating height */
  position: relative;
  
  /* i added the below */
  visibility:hidden; /* hides all .Tile-flyout on load so GSAP autoAlpha can do its thing */
  height:auto; /* tell the browser that initial height is auto */
  overflow:hidden; /* required when animating height properly */
}

.Tile.is-expanded .Tile-flyout {
  /*display: block;*/ /* do not use it, causes issues for show hide */
}

 

And i also had to adjust the .Tile-flyout:before rule

 

/* was */
top: ($space / -2); 

/* changed to -2 to 2 so top right arrow can line up properly on flyout */
top: ($space / 2);

 

Make sure that you always just take the time to setup your elements positioning first without any animation. And that the CSS is setup for hiding elements for all aspects of your CSS and JS. So when you are ready to animate it will make it so much easier.

 

Happy Tweening!

 

Resources:

TimelineMax Docs: https://greensock.com/docs/TimelineMax

GSAP CSSPlugin autoAlpha: https://greensock.com/docs/Plugins/CSSPlugin#autoAlpha

CSS overflow: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

 

 

 

  • Like 3
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.
×
×
  • Create New...