Jump to content
Search Community

Just a question about set vs element.style

jesper.landberg test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

 

Is TweenMax set different from using native js to set styles on an element? Im animating some stuff inside a animationFrame and just want to know if .set has any downside? Or the contrary?
 

function run() {
	//TweenMax.set(element, { x: someVariable })
  	//element.style.transform = `translate3d(${someVariable}px,0,0)`

	window.requestAnimationFrame(run)
}

window.requestAnimationFrame(fun)

 

Link to comment
Share on other sites

Hello @jesper.landberg,

 

The reason you would use GSAP set() versus element.style is so GSAP can keep track of what you are setting. If you use element.style, than you are updating the DOM with a CSS style change on an element outside of GSAP. So in your case you can use the GSAP set method so GSAP can keep track of your CSS changes. Now that doesn't mean you have to use GSAP set(), but there are some benefit to using set() over element.style.  Using element.style is likely faster, but if it was me I would opt for GSAP being always in the loop on what CSS properties you change. Im sure others here might opt for one over the other. But you can test each one and see what works best for your project.

 

But that is just my two cents, Happy Tweening :)

  • Like 5
Link to comment
Share on other sites

Using set() creates an actual tween with no duration. A tween by nature needs to read current values of the properties you are animating (or setting) and then also record the ending values. Also a tween is a javascript object with quite a few methods and properties. 

 

With element.style you have a direct path to changing a value with no additional memory or cpu overhead. element.style technically is less work than using set(). Whether or not you would ever notice any difference really depends on how you are using it and I suspect you'd only find a significant difference if you were doing hundreds (or thousands) of sets() vs hundreds of element.style. 

  • Like 6
Link to comment
Share on other sites

Yep, @Jonathan and @Carl are correct. Just to be add to what Jonathan said, it's particularly helpful to set transform-related values via GSAP rather than directly or via CSS because future animations can be faster and more accurate. GSAP caches the transform-related values and can skip parsing the matrix() or matrix3d() values that are reported by the browser which are inherently ambiguous (a rotation of 0, 360, 720, etc. result in the same matrix, and various other values combinations could be equally valid so things can get very imprecise). If all you're doing is setting values that are not transform-related, it's fine to set them directly. Most people find it's "safest" to go through GSAP since it solves so many browser inconsistencies, especially with transforms. 

  • Like 4
Link to comment
Share on other sites

7 hours ago, OSUblake said:

Do you actually need to call requestAnimationFrame? The ModfiersPlugin might be a better option depending on what you're doing. Check out these demos.

 

https://codepen.io/collection/AWxOyk/

 

Thanks will check those out:) What I am doing in this particular case is basically together with a mousemove event. I get the mouse coordinates with the event and then animate stuff with requestAnimationFrame. But in general I use requestAnimationFrame with most event that are fired a lot... mousemove, scrolll, touch events and so on. But maybe ModfiersPlugin might be able to replace requestAnimationFrame in some of these cases? Will check=)

 

Here is a quick demo of what im currently doing basically: 

See the Pen qyxezr?editors=1010 by ReGGae (@ReGGae) on CodePen

 

 

Link to comment
Share on other sites

8 hours ago, jesper.landberg said:

But in general I use requestAnimationFrame with most event that are fired a lot... mousemove, scrolll, touch events and so on. But maybe ModfiersPlugin might be able to replace requestAnimationFrame in some of these cases?

 

 

Do you remember this thread?

 

 

I mainly showed the ModifiersPlugin, but there's nothing wrong with using rAF, particularly if you're managing a bunch of different events. If that's the case, you could use the ticker instead.

https://greensock.com/docs/TweenLite/static.ticker

 

The Pixi demo is using the ticker provided by Pixi, but it's the same concept.

  • Like 3
Link to comment
Share on other sites

On 8/1/2018 at 4:10 PM, OSUblake said:

 

 

Do you remember this thread?

 

 

I mainly showed the ModifiersPlugin, but there's nothing wrong with using rAF, particularly if you're managing a bunch of different events. If that's the case, you could use the ticker instead.

https://greensock.com/docs/TweenLite/static.ticker

 

The Pixi demo is using the ticker provided by Pixi, but it's the same concept.

Thanks, when using something like modifiersPlugin, is it possible to pause it when not currently moving the mouse for example, with rAF I would cancel it when the lerp is done for example.

Link to comment
Share on other sites

On 8/5/2018 at 4:04 AM, jesper.landberg said:

Thanks, when using something like modifiersPlugin, is it possible to pause it when not currently moving the mouse for example, with rAF I would cancel it when the lerp is done for example.

 

Sure. It's an animation so you can pause and play it whenever. However, if you want to stop it when the lerp is done, then using rAF might be the most straight forward way.

 

Also, you can simplify your calculation like this.

function render() {
  rAF = null
    
  dx += (sx - dx) * 0.1;
  dy += (sy - dy) * 0.1;
  
  cursor.style.transform = `translate3d(${dx}px, ${dy}px, 0)`
  
  rAF = window.requestAnimationFrame(render)
}

 

 

It's a shorter version of your lerp function.

function lerp(a, b, n) {
  return a + (b - a) * n;
}

 

  • Like 4
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.
×
×
  • Create New...