ā–¼
Streaming live at 10am (PST)

What In Webflow 014 - šŸ˜² Reactive Text


#1

In this episode of What In Webflow 014, we walk-through how to create a reactive text effect in Webflow:

To walk-through this tutorial with me, make sure you use the cloneable project at https://webflow.com/website/Reactive-Type-Effect

Also, you can find a more comprehensive tutorial at https://www.superhi.com/video/how-to-make-reactive-type-as-seen-on-the-airbnb-cereal-site

Live site - http://reactive-type.webflow.io/

Read-only link - https://preview.webflow.com/preview/reactive-type?preview=e35f907f8f718beba10c517b649044eb

Clone link - https://webflow.com/website/Reactive-Type-Effect

Hopefully, this was helpful. Feel free to let me know if this is helpful, or if you have any additional questions.

Iā€™m happy to help further!


#2

Hi there,

I recently received a question to disable the script at a certain window size, and the following script will help do just that:

<script>
if (window.screen.width > 780) {
  document.write( 
    '<script src="https://cdn.rawgit.com/MicahRyan/Reactive-Type/5dd1faaf/js/reactive-type.js"><\/script>' 
  )
}
</script>

Hopefully, this was helpful. :nerd_face: