# How to change materials while rendering for animation effect

**URL:** <https://discourse.threejs.org/t/how-to-change-materials-while-rendering-for-animation-effect/61871>\
**Category:** Questions\
**Tags:** materials, animation\
**Created:** [February 23, 2024, 8:35pm UTC](https://discourse.threejs.org/t/how-to-change-materials-while-rendering-for-animation-effect/61871 "2024-02-23T20:35:53Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![att1106](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/att1106/32/45066_2.png) [@att1106](https://discourse.threejs.org/u/att1106)\
**Post date:** [February 23, 2024, 8:35pm UTC](https://discourse.threejs.org/t/how-to-change-materials-while-rendering-for-animation-effect/61871/1 "2024-02-23T20:35:53Z")

</div>

i have a spline application from which I got the nodes and materias via their export code. it useSpline:  
[https://codesandbox.io/p/devbox/branchly-purple-copy-yhrdkq?file=%2Findex.html](https://codesandbox.io/p/devbox/branchly-purple-copy-yhrdkq?file=%2Findex.html)

the spline app can be found here:

> **[Branchly Purple - Copy](https://app.spline.design/file/50d5f3d6-9d8d-470e-af82-0230f9414ba1)**

when clicking on play it animates by switching states and changing the material of the inside sphere from "“type: ashima, movement: 50” to “type: ashima, movement: 20” in the displace attribute. i want to create this animation via react-three-fiber and drei too, but don’t know how to change the materials properties while rendering. the basic export is here:  
[https://codesandbox.io/p/devbox/branchly-purple-copy-yhrdkq?file=%2Findex.html](https://codesandbox.io/p/devbox/branchly-purple-copy-yhrdkq?file=%2Findex.html)

Can anyone help me please?

 ![Screenshot 2024-02-23 at 21.27.35](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/c/2cbb08d4d70c093d815ca18d6a8008f9ae1426b7.jpeg)