CSS "toggleclass" with GSAP

[Nik]

Hi, I've got a jQuery function which toggles a CSS div between two states.

 

The function looks like this - 

 

$('#block2').click(function(){

    $(this).toggleClass("expanded");

    $('#content2').toggleClass("visible");

}

 

When you click the DIV it will change the class dictating the size of the div, as well as making the div's contents visible. The problem is that using CSS transitions to do this is extremely slow, doesn't animate well and interacts strangely with the other divs on the page.

 

I really want to rewrite this function so that GSAP can handle the animation. How would I go about doing this?

 

 

I've pasted the code I'm working with into a Codepen to give a better idea of what I'm working with. For some reason, the "visible" class toggle doesn't work on Codepen despite working locally.

 

See the Pen KVqxvK by anon (@anon) on CodePen

[Shaun Gorneau]

I haven't really looked at what you want to convert to GSAP (I will though) ... but want to first point out that you can simplify your JS to make everything much easier for yourself (especially if you were to add blocks to the layout).

 

See the Pen YwQJXB?editors=001 by sgorneau (@sgorneau) on CodePen

[Nik]

I haven't really looked at what you want to convert to GSAP (I will though) ... but want to first point out that you can simplify your JS to make everything much easier for yourself (especially if you were to add blocks to the layout).

 

See the Pen YwQJXB?editors=001 by sgorneau (@sgorneau) on CodePen

 

Hi Shaun, thanks a bunch for the pointer. I was really hoping there was a way to handle everything like that.

[Shaun Gorneau]

I've removed the CSS transitions and created GSAP animations in their place. Not sure the effects and timing are what you're looking for, but it should get you headed in the right direction.

 

See the Pen obwaYJ?editors=001 by sgorneau (@sgorneau) on CodePen

[Shaun Gorneau]

Hi Shaun, thanks a bunch for the pointer. I was really hoping there was a way to handle everything like that.

 

No problem at all! Glad to help.

[Jonathan]

Just my two cents.. you really dont want to animate top, right, bottom, or left CSS offset properties. There only good for the initial position within your CSS file.

 

As a rule of thumb... You should always animate x and y instead of left and top.

 

So top and left should be moved to the style sheet on the CSS rule (.block.expanded) instead of adding them to your to() tween.. even if at 0.

 

.block.expanded CSS rule should already have top and left on it. Its best practice to always define your top and left CSS properties when using position absolute or fixed. Otherwise you can not guarantee cross browser that top and left will be 0 .. since their default is auto, and will be calculated differently.