SVG speed with mouse movement

[anteksiler]

I am having some fps problems while animating the mouse cursor: http://twofold.fuelthemes.net/home-page/

 

The cursor changes on the left and right sides.

 

Does anyone know how I can remedy that?

See the Pen by home-page (@home-page) on CodePen

[anteksiler]

Adding requestAnimationFrame helped with the speed a little bit, but not 100%

[Jonathan]

Hello anteksiler,

 

Really cool website your making!

 

When i look at the cursor i see it is an SVG, but it is also using CSS transition for opacity. And it looks like that SVG is being animated with the left CSS property. Which can cause really bad jank animation due to left and top CSS properties only animating on a pixel level. You should always animate using x instead of left, so it animates on a sub-pixel level, and for smoother and a better animation.. even if it is just on mousemove.

 

Be careful about having CSS transitions on the same element or any child elements you are also using GSAP on. That can cause conflicts with both GSAP and the browsers CSS transitions to fight over applying styles to the same element. Which can affect performance!

 

I am also seeing CSS transitions on your main swiper parent. Again try not mix CSS transitions with GSAP. That will cause conflicts when on the same element or even a child or parent of an element GSAP is a trying to animate.

 

GSAP also has the method lagSmoothing()

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/static_lagSmoothing/

• lagSmoothing() Permits you to control what happens when too much time elapses between two ticks (updates) of the engine, adjusting the core timing mechanism to compensate and avoid "jumps".

 

If you are still having issues can you please setup a reduced codepen demo example? So this way we can see your code in context with your GSAP code that we can edit. Since it will be really hard to debug your code live, and to find even where your GSAP code is?

 

You have your code minified... and even if we un-minify it, it has like 750 lines to go through.

 

Here is a link to how to setup a codepen demo example. it just needs to be a simple example with the tweens in question so we can better help you.

 

 

Thanks!

[anteksiler]

Hi Jonathan, that's a really informative post, I'll look into the lagSmoothing right away! Thanks alot!

 

I am using the following code to animate the mouse cursor, so it's not GSAP moving the mouse.

gallery.find('.thb-arrow').each(function(){
								var _that = $(this),
										offset = _that.parents('.swiper-nav').offset(),
										mouseX = Math.min(e.pageX - offset.left, _that.parents('.swiper-nav').width()),
										mouseY = e.pageY - offset.top;
								if (mouseX < 0) { mouseX = 0; }
								if (mouseY < 0) { mouseY = 0; }
								window.requestAnimationFrame(function(){
									_that.css({left:mouseX - 40, top:mouseY - 40});
								});
							});

Do you have any examples moving the cursor with translate3d?

[Jonathan]

Instead of using the jQuery css() method you can use the GSAP set() method which works awesome with CSS transforms unlike the jQuery css() method.

 

So you could change this line from above:

_that.css({left:mouseX - 40, top:mouseY - 40});

Into this using GSAP set() and using force3D: true

TweenMax.set(_that, {x:mouseX -40, y:mouseY -40, force3D:true});

That would use GSAP to set the CSS as a transform using x and y instead of top and left. And i also added force3D:true.

 

If for some reason you don't see translate3d() or matrix3d() .. you can also try adding a slight rotation: 0.01 or z: 0.01 to your tween

TweenMax.set(_that, {x:mouseX - 40, y:mouseY - 40, rotation:0.01, force3D:true});

The set() method can be found in the GSAP Docs:

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/set/

 

set() Immediately sets properties of the target accordingly - essentially a zero-duration to() tween with a more intuitive name.

 

force3D is part of the CSSPlugin:

 

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

• force3D
  As of 1.15.0, force3D defaults to "auto" mode which means transforms are automatically optimized for speed by using matrix3d() instead of matrix(), or translate3d() instead of translate(). This typically results in the browser putting that element onto its own compositor layer, making animation updates more efficient. In "auto" mode, GSAP will automatically switch back to 2D when the tween is done (if 3D isn't necessary) to free up more GPU memory. If you'd prefer to keep it in 3D mode, you can set force3D:true. Or, to stay in 2D mode whenever possible, set force3D:false. See http://css-tricks.com/myth-busting-css-animations-vs-javascript/ for more details about performance.

I hope this helps!

[anteksiler]

Hi Jonathan, changing it with TweenMax set definitely decreased the lag