I’m working on the front end and I’ve successfully used the viewer API as told in the tutorial of Shapediver to display the models, and parameters on our front end. Now I want to animate the doors and drawers (of the shape diver model) such as opening and rotating by clicking on our website, I’ve extracted the animation data of the model which is in this format, for example -
Animation Data:
- Array(3)
- 0: {type: ‘rotation’, direction: ‘L’, pivot: {…}}
- 1: {type: ‘rotation’, direction: ‘R’, pivot: {…}}
- 2: {type: ‘rotation’, direction: ‘L’, pivot: {…}}
so from this data, I understood that the doors could rotate but what things do I need to know and use to do the on-click animation of the doors/drawers, and how to do it? I want to make my front end more interactive for users.
Hello @Ankita_Kushwaha,
First of all, here is our help desk page for animations, please have a look, as this explains some details.
In this example I create an animation where the door of the shelf first translates and then rotates. With this you should be able to create an animation for each of your doors. Depending on the direction you door and where the origin of the object is, you would also need to change the pivot and the invert the rotation. You can find the api documentation on the properties here.
Let me know if you have any further questions!
Cheers, Michael
1 Like
Thank you @MajorMeerkatThe3rd for your reply. I tried the animation that you referred me and I have a follow-up question regarding animating outputs (like the door example). I have a single output for “doors” that includes all of my doors, each with a different animation type in the animation data(I’ve extracted it). However, when I use the “doors” output by name, all doors rotate as a single door. To create different animations for each door, do I need a node ID or a different output name for each door and ask the grasshopper dev to make the output name different for each door?
As a front-end developer, I need to know which element, name, or ID to ask the Grasshopper developer for, or what to extract to animate each door properly. Grasshopper dev told me that it will increase loading time if they create different door output names for each so if not then how to do it separately
Additionally, I want to achieve a general animation on click for doors in our UI, similar to what is seen on Kura Midboard with Planter – NOMI Australia (in the custom part even if they are customizing all the door numbers the doors are still moving in the direction they should move on clicking the particular door or drawer)
For instance, if I change the width in my configurator, more doors will appear, and I want each to open correctly when clicked. How can I implement a general animation for the dynamically appearing doors to open from the correct direction based on the number of doors or drawers based on user selection?
I’m very new and very eager to learn to shape diver as a web dev and want to interact and animate the model, so it’s a bit overwhelming. But I want to understand all of this. Looking forward to your reply.
Hello @Ankita_Kushwaha,
I will work on an example next week that will do something similar as you described and will send you a link to the code example and the Grasshopper file once I’m finished.
Cheers, Michael
1 Like
Hello @MajorMeerkatThe3rd,
Thank you so much for considering this! I’m from POST 105, your Grasshopper partners, and I’m very excited to explore the animations, interactions, and features you’re working on.
Looking forward to your example.
Cheers,
Ankita
Hello @Ankita_Kushwaha,
here is the new example I was talking about, the data for the animations comes from Grasshopper so you can send the GH file (which is linked in the description of the model) to the Grasshopper developer.
While in the example the doors open when you hover over them, this of course also works for selecting them.
Cheers, Michael
1 Like
Hello @MajorMeerkatThe3rd ,
Thank you so much for considering and providing the example and GH file. 