# Text / section transition using threejs?

**URL:** <https://discourse.threejs.org/t/text-section-transition-using-threejs/82586>\
**Category:** Questions\
**Tags:** text, shaders\
**Created:** [May 14, 2025, 5:38pm UTC](https://discourse.threejs.org/t/text-section-transition-using-threejs/82586 "2025-05-14T17:38:20Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sergio](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sergio/32/58581_2.png) [@Sergio](https://discourse.threejs.org/u/Sergio)\
**Post date:** [May 14, 2025, 5:38pm UTC](https://discourse.threejs.org/t/text-section-transition-using-threejs/82586/1 "2025-05-14T17:38:20Z")

</div>

Hello,  
I’m building a website that will require some text transitions and i did a quick research to look at some references and i want to know if these two example are possible to do using threejs:

the first one is coming from this website: [SONY BRAVIA 2017 Design Concept | TAO TAJIMA | Filmmaker](https://taotajima.jp/works/bravia-2017/)  
and i really liked this text animation where the text comes from the bottom right and exits at the top right, is it possible to do using threejs?

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/f/3f0d285c656cbd16f37f90c05d165039859b41a5.jpeg)

the next example is something similar, where the div which is a video transforms during a quick animation into a very larger box, it’s in this website, the Reel section:

> **[Lusion - Realise Your Creative Ideas](https://lusion.co/)**
>
> Lusion is a Bristol based award-winning creative production studio specializing in 3D visual storytelling and interactive web experiences.

So my question is: Is this possible to do using threejs? if so can you show me some code to use as reference?

---

<div class="post-metadata">

**Author:** ![Lukasz\_Mestales](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lukasz_mestales/32/65638_2.png) [@Lukasz\_Mestales](https://discourse.threejs.org/u/Lukasz_Mestales)\
**Post date:** [May 15, 2025, 8:09am UTC](https://discourse.threejs.org/t/text-section-transition-using-threejs/82586/2 "2025-05-15T08:09:00Z")

</div>

Here you go:

> **[Taotajima.jp WebGL deconstruction](https://medium.com/@akella/taotajima-jp-webgl-deconstruction-af4946e8e8ed)**
>
> I love decompiling stuff, i did that for facebook 3D photos recently, this time it’s marvelous TaoTajima.jp website. Built with THREE.js.

and here

[https://codesandbox.io/p/sandbox/threejs-grid-to-fullscreen-demo-3-forked-kyg233?file=%2Fsrc%2Findex.js%3A14%2C11](https://codesandbox.io/p/sandbox/threejs-grid-to-fullscreen-demo-3-forked-kyg233?file=%2Fsrc%2Findex.js%3A14%2C11)

But about text, is not so obvious in first glance, you can make this in several ways, you will find here on forum, how you can manipulating text in WebGL for example… But you don’t have to diving in _WebGL text_, you can use old and good `Svg`…

[https://codepen.io/Lucas\_Mas/pen/wBBNbpV?editors=1100](https://codepen.io/Lucas_Mas/pen/wBBNbpV?editors=1100)