# How to animate the texture map change of MeshBasicMaterial using gsap ? (or any other possible method)

**URL:** <https://discourse.threejs.org/t/how-to-animate-the-texture-map-change-of-meshbasicmaterial-using-gsap-or-any-other-possible-method/32887>\
**Category:** Questions\
**Tags:** textures, materials\
**Created:** [December 21, 2021, 3:25pm UTC](https://discourse.threejs.org/t/how-to-animate-the-texture-map-change-of-meshbasicmaterial-using-gsap-or-any-other-possible-method/32887 "2021-12-21T15:25:09Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![ogosta](https://avatars.discourse-cdn.com/v4/letter/o/22d042/32.png) [@ogosta](https://discourse.threejs.org/u/ogosta)\
**Post date:** [December 21, 2021, 3:25pm UTC](https://discourse.threejs.org/t/how-to-animate-the-texture-map-change-of-meshbasicmaterial-using-gsap-or-any-other-possible-method/32887/1 "2021-12-21T15:25:09Z")

</div>

Hi, I was able to successfully animate the color attribute of the material when the raycast hit my object (am creating a hover effect) using gsap but now am stuck on the map attribute, it’s changing as expected (object.material.map = newMap;) but that isn’t smooth it just replace it, how can I make that replacement smoother?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [December 21, 2021, 3:27pm UTC](https://discourse.threejs.org/t/how-to-animate-the-texture-map-change-of-meshbasicmaterial-using-gsap-or-any-other-possible-method/32887/2 "2021-12-21T15:27:36Z")

</div>

Hi!  
For some ideas, have a look at this post: [Smooth transition between textures with GSAP - #6 by prisoner849](https://discourse.threejs.org/t/smooth-transition-between-textures-with-gsap/24631/6)

---

<div class="post-metadata">

**Author:** ![ogosta](https://avatars.discourse-cdn.com/v4/letter/o/22d042/32.png) [@ogosta](https://discourse.threejs.org/u/ogosta)\
**Post date:** [December 21, 2021, 4:15pm UTC](https://discourse.threejs.org/t/how-to-animate-the-texture-map-change-of-meshbasicmaterial-using-gsap-or-any-other-possible-method/32887/3 "2021-12-21T16:15:18Z")

</div>

thanks for the reply, is there any way to do it without switching to shadermaterial ?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [December 21, 2021, 4:28pm UTC](https://discourse.threejs.org/t/how-to-animate-the-texture-map-change-of-meshbasicmaterial-using-gsap-or-any-other-possible-method/32887/4 "2021-12-21T16:28:37Z")

</div>

You can modify shaders of existing materials, using `.onBeforeCompile()`.  
AFAIK, there is no out-of-box functionality for transition between textures.

---

<div class="post-metadata">

**Author:** ![ogosta](https://avatars.discourse-cdn.com/v4/letter/o/22d042/32.png) [@ogosta](https://discourse.threejs.org/u/ogosta)\
**Post date:** [December 21, 2021, 4:32pm UTC](https://discourse.threejs.org/t/how-to-animate-the-texture-map-change-of-meshbasicmaterial-using-gsap-or-any-other-possible-method/32887/5 "2021-12-21T16:32:49Z")

</div>

okay switching to ShaderMaterial seems to be my best solution, thanks a lot it was an honor to get a reply from you, I always find the best solutions from your previous answers 😃

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [December 23, 2021, 2:11pm UTC](https://discourse.threejs.org/t/how-to-animate-the-texture-map-change-of-meshbasicmaterial-using-gsap-or-any-other-possible-method/32887/6 "2021-12-23T14:11:51Z")

</div>

Been asked for several times already with the same question. So, here is an option with tween.js and modified `MeshLambertMaterial`: [Texture transition - JSFiddle - Code Playground](https://jsfiddle.net/prisoner849/bmda176z/)

Not the ultimate solution, but a starting point.

![TextureTransition](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/2/b2238fd77e0dd48882911bc37c46b1e48a0ba2c8.gif)

---

<div class="post-metadata">

**Author:** ![eze](https://avatars.discourse-cdn.com/v4/letter/e/e79b87/32.png) [@eze](https://discourse.threejs.org/u/eze)\
**Post date:** [July 23, 2022, 1:40am UTC](https://discourse.threejs.org/t/how-to-animate-the-texture-map-change-of-meshbasicmaterial-using-gsap-or-any-other-possible-method/32887/7 "2022-07-23T01:40:16Z")

</div>

Running on the latest three.js reports an error