Jump to content
GreenSock

tailbreezy

Opacity Issue / toggling Class

Recommended Posts

Hello,

 

New to GSAP.

Being trying to figure out something all day.

Hope you can help me out.

 

Basically you have a parent with children inside. Some children have display:none;

Ideally the parent has no height set and is fully derived from the children.

More plausibly the parent has set height to display some of the children (e.g initial state) .

 

Toggle a class and transition the parent to new height + animate the children.

 

 

This codepen works only after the initial click. On first click it is glitchy and not in the right order. Not sure why.

After the first click, it works as I intended. So this is the result that I am after minus the initial click glitch.

 

Not fond of the code, maybe a better and simpler way to do it? And why the glitch?

 

See the Pen VwaPJQe?editors=0010 by dadacoded (@dadacoded) on CodePen

Link to comment
Share on other sites

Hey @tailbreezy

 

Is it something like this, you want to achieve?

 

See the Pen 7ca239fdff12d5cce070837b448ea912 by akapowl (@akapowl) on CodePen

 

 

You could simply just set a min-height of 100px and a height of "auto" on your section via CSS and only tween the height of your big element with GSAP. 

Since the height of the section is set to auto in this scenario, it would automatically respond to the changing height of its children.

 

Just an idea.

 

Cheers,

Paul

 

Edit: What I am referring to, only happens after first click. The initial state is not set correct in my example.

  • Thanks 1
Link to comment
Share on other sites

Thank you, Paul. Appreciate your the pen.

 

Unfortunately, it is not quite what I was after. I do not want to stretch the children. Just stretch/transition the parent height to match the total of the children's. And after the parent transition to apply a transition on the new children.

 

But the children can have different heights depending on the resolution, since they could be text.

 

Not quite sure how to deal with those display:none to display:block? Since so far this is the best way to get offsetHeight and estimate the total height of the children.

  • Like 1
Link to comment
Share on other sites

Alright, you're welcome.

 

Is this more like what you want to achieve?

 

See the Pen 3f71a982b9f6cf5ee10bdc5da5a12c18 by akapowl (@akapowl) on CodePen

 

I think the main issue here, is that the tweens in your second timeline sort of 'overwrite' the values of the first timeline ( not the proper terms - just my interpretation of it) - you can avoid this by adding

immediateRender: false

to those tweens in the second timeline and it should be good to go.

 

 

Also, I was looking for a related thread on this for more information (and a proper explenation on this - not just my jibberish) - but I couldn't find it for now - will add it in later, if I'm gonna find it.

 

Let me know, if this is more like what you wanted to achieve.

Cheers

 

  • Like 3
Link to comment
Share on other sites

Hey tailbreezy and welcome to the GreenSock forums! Thanks for supporting GreenSock by being a Club GreenSock member.

 

2 hours ago, tailbreezy said:

When height goes from big to small => the opacity changes instantly (no transition)

This is because of how you're toggling display. Since you're toggling a class that has a display, when you remove that class then it is no longer displayed. Hence the visual jump. It's best to avoid using classes as a toggle for properties that you're changing - just use GSAP instead :) 

 

You'd greatly benefit from my article on animating efficiently. Applying some of the concepts from that article, you should get something like this:

See the Pen ZEWLgEd?editors=0110 by GreenSock (@GreenSock) on CodePen

 

I believe there's a bug with the height at the end of the reverse though. It works in version 3.4.2. @GreenSock should be able to confirm.

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

@akapowl Awesome! Exactly what I wanted to achieve.

 

Would have never figured out that I need immediateRender in the second timelines. 

Also I was still using the unofficial ClassName plugin, didn't know it was in the official specs now.

 

All in all, I owe you a beer or more :)

  • Like 1
Link to comment
Share on other sites

1 hour ago, ZachSaucier said:

I believe there's a bug with the height at the end of the reverse though. It works in version 3.4.2. @GreenSock should be able to confirm.

 

Ah. :) Would love to hear about this.

 

Love the way you handled isActive and reversing and the article is perfect!

Pretty sweet to use one timeline, although having a solution with two will come in handy as well (thanks to Paul).

 

 

 

 

  • Like 1
Link to comment
Share on other sites

Is this what you're after? This seems simplest:

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

 

5 hours ago, ZachSaucier said:

I believe there's a bug with the height at the end of the reverse though. It works in version 3.4.2. @GreenSock should be able to confirm.

No, as far as I can tell it's actually a bug in the older versions. 

 

Longer explanation:

If you set immediateRender: false, that's a cue to GSAP that the state is specific to that tween, thus if you rewind the playhead PAST the start, it should REVERT to the previous value. It's like there are 3 states - the "before the tween started" state, the "starting values" and the "ending values". When immediateRender is true, it's more like two states (no "before the tween started" state). 


For example, if box.height starts at 0 and then you do a .from(box, {height: 100, immediateRender: false}, 1) it would stay at 0 for the first 1 second and then JUMP to 100 and animate down to a height of 0. But imagine rewinding that.... it would go 0 -> 100...then JUMP back to 0 (the pre-tween value!) 

 

If you think there's a bug, though, please be very specific about what you think should happen and why (keeping in mind what I explained above). Perhaps I'm missing something. 

  • Like 4
Link to comment
Share on other sites

15 hours ago, GreenSock said:

If you set immediateRender: false, that's a cue to GSAP that the state is specific to that tween, thus if you rewind the playhead PAST the start, it should REVERT to the previous value. It's like there are 3 states - the "before the tween started" state, the "starting values" and the "ending values". When immediateRender is true, it's more like two states (no "before the tween started" state). 

This explanation made perfect sense. Thank you!

 

 

As for the bug, on ZachSaucier pen you can see that when you click to play the animation and then click again all transitions properly until to the "before the tween started" kinda state. Instead of initial start value it jumps to end value.

See the Pen ZEWLgEd?editors=1010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

2 hours ago, tailbreezy said:

As for the bug, on ZachSaucier pen you can see that when you click to play the animation and then click again all transitions properly until to the "before the tween started" kinda state. Instead of initial start value it jumps to end value.

Yes, I see that but from what I can tell that's exactly what it should do. Are you saying you still think it's a bug? If so, would you mind providing a detailed explanation? I very well may be missing something. 

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