[Tweening css classes]

This is just a specificity issue unrelated to GSAP. If you open dev tools, you'll see that GSAP is doing its job of applying the width properly (in animated fashion) to the inline CSS. However, if you add !important to the class, it overrides even the inline style, thus it jumps to that value and ignores all the changes GSAP is making during the animation. 

 

Without adding !important, the inline CSS that you applied using $(...).css({width:"100px"}); takes precedence. Thus, when GSAP adds the class, it correctly doesn't override the 100px width that you set inline. 

 

Is there a reason you need to animate to a className? I think you'd get better results if you just did normal tweens to the values you need. Not only is it faster, but it avoids the specificity issues you're running into. 

 

Thanks for the respons!

 

The reasson I'm animating to a className is because it's easier to make a responsive site that way by using different implemented class names in different CSS-files for different sizes of the screen. Else i need to add some kind of check in my JavaScript which checks in what mode my website is, mobile or ordinary view, and I find that more complex.

[Tweening css classes]

Hi!

 

I have a problem where I want to Tween from an already set left and top offset ( set through Jquery and .offset({left: , top: }) ) to a specifik top and left offset set through a CSS-class, but what happens is nothing, but if I change the attribute in the CSS-file to !important then the left and top offset changes but they don't animate. Is there a way to get the Tween to work?

 

I have modified Diaco.AWs example to show my problem.

 

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

 

What I'm trying to do is to crate a new <DIV> and position it over a clicked element (which can be at many different places) and then animate the <DIV> to a specific position (offset left: 0, offset top: 350) regardless of the position of the clicked elements position.

 

Best regards 

  Fredrik Johansson, Sweden