Animating CSS

[Petr Mucha]

Hi, I was wondering whether it is a good practice to use gsap to tween an integer and than asign this integer to an css property with requestAnimationFrame function, or it'is a nonsense and is always better to tween the css property with gsap css plugin. And if so, than why?.

Thanks for any answers

P
 

[ZachSaucier]

Hey Petr,

 

Why not just tween the CSS property? GSAP does things like this very well! gsap.to(".elem", {x: 100});

 

Maybe a demo would help us understand why you're asking the question that you're asking.

[Petr Mucha]

Thanks for the reply! I want the requestAnimationFrame to be watching a variable simple because there are more factors influencing it during the Life Cycle of the app. It'll be increased over time automatically and different types of interactions will take place so I was considering this hack of tweening, increasing, decreasing and resetting the variable rather than the css property. Just for simplifying things in coding. I am fine with it. The only thing is whether it would influence the performance in a bad way or no.

 

See the Pen povzgjL by mindfulness (@mindfulness) on CodePen

I suck in Codepening but here's the example. The thing is that the cube shall have various ways of interaction like swiping, automove and such so the idea of having one variable changing and the rest done by every frame loop seems quite nice to me, but...

 

 

[Petr Mucha]

Oh You just need to click the grey boxes on the left and right to see it moving.

[ZachSaucier]

2 minutes ago, Petr Mucha said:

Oh You just need to click the grey boxes on the left and right to see it moving.

I figured it out  

 

So what part of the demo are you asking about, specifically? It'd be nice if you could say something like "Should I do X in line Y or do Z there instead?"

[Petr Mucha]

My question was more general like if it is a totally wrong idea to use gsap to animate a variable rather than css property. The combination of requestAnimationFrame and gsap tween for changing the value of a variable. It's in the whole code not just a line or two. I use this key function to make it move:
 

move_the_cube(){

    /*
    * MAIN LOOP EVERY ANIMATION FRAME
    */
        if(this._y >= 360)
            this._y = 0;

        
        window.requestAnimationFrame(()=>{
            this.cube_el.style.transform = 'rotateY('+this._y+'deg)';
            this.cube_rotator_el.style.transform = ' rotatex('+this._x+'deg)';
            this.move_the_cube();
        });
        
    }
}

 

[ZachSaucier]

18 minutes ago, Petr Mucha said:

My question was more general like if it is a totally wrong idea to use gsap to animate a variable rather than css property.

Oh, not at all! GSAP is really a property (variable) setter so it works with any object that you give it, including DOM, canvas, WebGL, etc.

 

Your use of raf with GSAP doesn't make much sense to me. Just use GSAP's .set() method and it will do that all for you (with likely less errors):

 

move_the_cube(){

    /*
    * MAIN LOOP EVERY ANIMATION FRAME
    */
        if(this._y >= 360)
            this._y = 0;

        gsap.set(cube_el, {rotationY: this._y, rotationX: this._x});
        requestAnimationFrame(this.move_the_cube);
    }
}

 

[Petr Mucha]

6 minutes ago, ZachSaucier said:

 

Your use of raf with GSAP doesn't make much sense to me. 

 

Hmm I think it comes from working with three.js where You just need raf to make things moving (render scene) I'll do the testing on how it would work with direct animation of css.

Thanks a bunch for Your time

Have a good one!

 

[OSUblake]

You don't need to use requestAnimationFrame as gsap is already using it. Just use the onUpdate callback in a tween/timeline, or gsap's ticker. 

https://greensock.com/docs/v3/GSAP/gsap.ticker

 

And another way to set properties is with the quick setter.

https://greensock.com/docs/v3/GSAP/gsap.quickSetter()

 

This demo uses ticker and quickSetter.

 

See the Pen WNNNBpo by GreenSock (@GreenSock) on CodePen

 

 

 

 

[Petr Mucha]

I guess ticker is what I was looking for. It seems like the most proper way to combo raf and gsap. The quickSetter I've already discovered examining the .set() method :)

And once again, thanks a lot!