Is it possible to initiate an animation programmatically?

[akamaryna]

Hello, thanks for this amazing library!

Is it possible to initiate an animation programmatically?
I mean not on mouse move or scroll, but by JS (for example on window load)

Thanks,
Maryna

[Aminerman]

Hello, thank you for your feedback :)

At the moment there is no such possibility but we can discuss the idea. The idea behind Kinesis is to move objects based on values that evolve through time (mouse movement, scroll, audio...). So it won't work for, let's say, a tweening between a start and end value. All the intermediate values have to be calculated "manually".

But I'd like to understand your need first. What kind of effect are you trying to achieve? A looping animation? Just a normal tweening animation? Or an animation based on values that you'd pass to what you want to animate (as explained above).

Thank you!

[akamaryna]

Hi Aminerman,
Please see how my animation is working on the desktop in the attached gif - it's kinda an eye that is watching the mouse move.
On the mobile, I'd like it acts the same but without user interaction.
I thought to write few "states" (for example rotateX(10deg)&rotateY(-12deg) and rotateX(12deg)&rotateY(17deg)) and make the button toggle these states when it's in the viewport.

[Aminerman]

Oh I see, that's an interesting idea. That's cool to see what you managed to do :)
I'll consider you suggestion. I'll need to think about it.
The thing is that if you need to do a looping animation using those "states", you might want to use another animation library, like anime.js or GSAP. But I understand that you might not want to add another dependency just for that. This is why I'll think about it.

[Aminerman]

So after thinking about it here is what I came up with. The idea would be to add a :states prop, but it will work a bit differently than what you suggested. Instead of passing css-like transform properties, the idea would be to pass values ranging from 0 to 1, or 0% to 100%.
There are many reasons for that:

• The way Kinesis works already is that it maps the start of the animation to 0 and the end of it to 1. For example if your container is 200px wide, when the mouse is at the further left of the container it corresponds to 0, and when it's in the further right 200 is mapped to 1. Then these values between 0 and 1 are multiplied with the :strength prop. This is what makes things move.

• If we go with your solution, that would mean you will need to pass states to all your kinesis-elements, whereas if you pass values between 0 and 1 you'll need to pass it only to the kinesis-container and it will move all the kinesis-elements according to there given :strength.

• Another thing is that, if you want to change the type of animation (rotate, translate...) of your kinesis-elements, you'll have to pass different states for each animation type. Whereas if we go with the 0 to 1 values, it's agnostic to what type of animation you use, it keeps things consistent for all types of animations.

It might not all make sense to you, but my goal with this is to keep consistency and the ease of use. I'll give a proper explanation of this, with examples, when it will be implemented.

[akamaryna]

Thanks, that sounds fully reasonable!

[joeczar]

Hi, has there been any progress on this issue? I have a similar use case for mobile that I'd like to fallback to if there is no gyroscope support.