Give smoothness to this animation

[benedex82]

Hello everyone, I'm studying GSAP and this could be my first production integration...

 

My goal is the creation of a fixed navbar that appears after a scroll, the red div will be my sidebar with a small image inside.

 

I want to know I can give more smoothness to the image animation, it seems not fluid.

 

Any other consideration about my sript will be appreciated...!

 

 

Thanks

See the Pen vXWZAP by benedex82 (@benedex82) on CodePen

[WarenGonzaga]

Hello @benedex82!

 

Welcome to GSAP Forum!

 

Please stand by while I am finding solution for your issue!

 

GSAP Enthusiast,

Waren

[WarenGonzaga]

Hello buddy!

 

I'm back! Here's the forked codepen of yours...

 

My suggestion don't rely on css to manipulate your image. You can use the cssplugin of GSAP don't be confuse the cssplugin is built in on the gsap tweenmax. You should add plugin if you're using tweenlite. Please manipulate the element using the GSAP variables such as

menu_tl
.to('.navbar', 0.5, {
  opacity: '1'
})
.to(".big_image", 0.5, {
  css:{width: "300px", height: "140px"}, // you should use this for smooth animation.
});

I've edited also your css and you must have a look to my forked pen of yours.

 

Codepen: 

See the Pen YGEEbW by Waren_Gonzaga (@Waren_Gonzaga) on CodePen

 

Hope it helps!

GSAP Enthusiast!

Waren

[benedex82]

Great. Thanks a lot!!

[Jonathan]

Hello benedex82,

 

Just to add to Waren's great advice. Any time you animate width or height you want to also add the CSSPlugin special property autoRound:false. This makes sure that width and height animate on a sub-pixel level.

menu_tl
.to('.navbar', 0.5, {
      opacity: '1'
})
.to(".big_image", 0.5, {
      css:{
         width: "300px", 
         height: "140px", 
         autoRound:false // add autoRound to force sub-pixel-rendering
      }, 
});

CSSPlugin Docs: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

• autoRound
  By default, CSSPlugin will round pixel values and zIndex to the closest integer during the tween (the inbetween values) because it improves browser performance, but if you'd rather disable that behavior, pass autoRound:false in the css object. You can still use the RoundPropsPlugin to manually define properties that you want rounded. 

Happy Tweening