How I Built a Scroll-Scrubbed Typewriter Effect With GSAP ScrollTrigger (Full Breakdown)

How the Scroll Typewriter effect was built with GSAP ScrollTrigger — full code walkthrough, CDN setup, use cases, and export to React, Vue & Tailwind

How I Built a Scroll-Scrubbed Typewriter Effect With GSAP ScrollTrigger (Full Breakdown)

How I Built a Scroll-Scrubbed Typewriter Effect With GSAP ScrollTrigger (Full Breakdown) Most "typewriter" effects on the web play on a timer — a character appears every 60ms whether you're watching or not. The Scroll Typewriter snippet does something different: your scrollbar is the keyboard. Scroll down and the terminal types itself out, character by character. Scroll back up and it deletes itself in perfect reverse, caret and all. Pause anywhere and the text freezes exactly where your scroll position says it should. Here's the effect live — try scrolling through it, then scrolling back up: Grab the code, or open the full editor with live HTML/CSS/JS panels: Scroll Typewriter on FWD Tools . The snippet is plain HTML, CSS, and JavaScript, but the same editor also has one-click export buttons for React , Vue , Angular , and React + Tailwind if you'd rather drop it straight into a component-based project than copy raw markup. In this post I'm going to walk through the…

About the author

Puneet Sharma is a freelance web developer, tech writer, and founder of FWD Tools. He publishes WebDevPuneet, TheTechWatcher, TheAutoWatcher, HollyWatcher, and BollyWatcher.

Post a Comment

<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/321148285-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AEUoTZokaMGOafgy0rMmc57TuIxQ:1784111829341';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7154435437619178098','//www.webdevpuneet.com/2026/07/how-i-built-scroll-scrubbed-typewriter.html?amp\x3d1','7154435437619178098');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '7154435437619178098', 'title': 'webdevpuneet', 'url': 'https://www.webdevpuneet.com/2026/07/how-i-built-scroll-scrubbed-typewriter.html?amp\x3d1', 'canonicalUrl': 'https://www.webdevpuneet.com/2026/07/how-i-built-scroll-scrubbed-typewriter.html', 'homepageUrl': 'https://www.webdevpuneet.com/?amp\x3d1', 'searchUrl': 'https://www.webdevpuneet.com/search', 'canonicalHomepageUrl': 'https://www.webdevpuneet.com/', 'blogspotFaviconUrl': 'https://www.webdevpuneet.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': true, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': 'G-SJKRD65SBJ', 'analytics4': true, 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22webdevpuneet - Atom\x22 href\x3d\x22https://www.webdevpuneet.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22webdevpuneet - RSS\x22 href\x3d\x22https://www.webdevpuneet.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22webdevpuneet - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/7154435437619178098/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22webdevpuneet - Atom\x22 href\x3d\x22https://www.webdevpuneet.com/feeds/2553678517731125915/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-2762737943861458', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': true, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/0b901e5396ee8015', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'item', 'postId': '2553678517731125915', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5KC1Pj7eWmjw6qvf5Hs01-bFiZ95dvRo1qL6AJxlE0UWwNGAeuizhTldDojTtsH38MbzWFQHZb8lT8oX-VfVBNQnKOsUBHygtXHlqa0PXP-UsIiMuAdNMdfUj62QVR-HhVJq7OuH2KgQ8iYKM7YdWXt6jaWt9bWFMLncc3ZaFiDNdqQsU884WYXCSTK0/s72-c/Screenshot_1.png', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5KC1Pj7eWmjw6qvf5Hs01-bFiZ95dvRo1qL6AJxlE0UWwNGAeuizhTldDojTtsH38MbzWFQHZb8lT8oX-VfVBNQnKOsUBHygtXHlqa0PXP-UsIiMuAdNMdfUj62QVR-HhVJq7OuH2KgQ8iYKM7YdWXt6jaWt9bWFMLncc3ZaFiDNdqQsU884WYXCSTK0/s1600/Screenshot_1.png', 'pageName': 'How I Built a Scroll-Scrubbed Typewriter Effect With GSAP ScrollTrigger (Full Breakdown)', 'pageTitle': 'webdevpuneet: How I Built a Scroll-Scrubbed Typewriter Effect With GSAP ScrollTrigger (Full Breakdown)', 'metaDescription': 'How the Scroll Typewriter effect was built with GSAP ScrollTrigger \u2014 full code walkthrough, CDN setup, use cases, and export to React, Vue \x26 Tailwind'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'How I Built a Scroll-Scrubbed Typewriter Effect With GSAP ScrollTrigger (Full Breakdown)', 'description': 'How the Scroll Typewriter effect was built with GSAP ScrollTrigger \u2014 full code walkthrough, CDN setup, use cases, and export to React, Vue \x26 Tailwind', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5KC1Pj7eWmjw6qvf5Hs01-bFiZ95dvRo1qL6AJxlE0UWwNGAeuizhTldDojTtsH38MbzWFQHZb8lT8oX-VfVBNQnKOsUBHygtXHlqa0PXP-UsIiMuAdNMdfUj62QVR-HhVJq7OuH2KgQ8iYKM7YdWXt6jaWt9bWFMLncc3ZaFiDNdqQsU884WYXCSTK0/s1600/Screenshot_1.png', 'url': 'https://www.webdevpuneet.com/2026/07/how-i-built-scroll-scrubbed-typewriter.html?amp\x3d1', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 2553678517731125915}}, {'name': 'widgets', 'data': [{'title': 'webdevpuneet (Header)', 'type': 'Header', 'sectionId': 'sec_Header_Title', 'id': 'Header01'}, {'title': 'Looking for something?', 'type': 'BlogSearch', 'sectionId': 'sec_Header_Search', 'id': 'BlogSearch01'}, {'title': 'Header Icon', 'type': 'TextList', 'sectionId': 'sec_Header_Icon', 'id': 'TextList01'}, {'title': 'Bookmark Posts', 'type': 'LinkList', 'sectionId': 'sec_Header_Icon', 'id': 'LinkList02'}, {'title': 'Translate', 'type': 'LinkList', 'sectionId': 'sec_Header_Icon', 'id': 'LinkList03'}, {'title': 'Tabbed Menu', 'type': 'LinkList', 'sectionId': 'sec_Under_Header', 'id': 'LinkList05'}, {'title': 'Labels Description', 'type': 'LinkList', 'sectionId': 'sec_Under_Header', 'id': 'LinkList07'}, {'title': 'Blog Posts', 'type': 'Blog', 'sectionId': 'sec_Main_Widgets', 'id': 'Blog01', 'posts': [{'id': '2553678517731125915', 'title': 'How I Built a Scroll-Scrubbed Typewriter Effect With GSAP ScrollTrigger (Full Breakdown)', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5KC1Pj7eWmjw6qvf5Hs01-bFiZ95dvRo1qL6AJxlE0UWwNGAeuizhTldDojTtsH38MbzWFQHZb8lT8oX-VfVBNQnKOsUBHygtXHlqa0PXP-UsIiMuAdNMdfUj62QVR-HhVJq7OuH2KgQ8iYKM7YdWXt6jaWt9bWFMLncc3ZaFiDNdqQsU884WYXCSTK0/s1600/Screenshot_1.png', 'showInlineAds': true}], 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'author', 'label': 'Published by'}, {'name': 'timestamp', 'label': 'On'}, {'name': 'comments', 'label': 'Comment'}, {'name': 'share', 'label': ''}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': 'in'}]}, {'regionName': 'footer3', 'items': [{'name': 'location', 'label': 'Location:'}]}], 'allBylineItems': [{'name': 'author', 'label': 'Published by'}, {'name': 'timestamp', 'label': 'On'}, {'name': 'comments', 'label': 'Comment'}, {'name': 'share', 'label': ''}, {'name': 'labels', 'label': 'in'}, {'name': 'location', 'label': 'Location:'}]}, {'title': 'Categorized Posts', 'type': 'LinkList', 'sectionId': 'sec_Main_Widgets', 'id': 'LinkList08'}, {'title': 'Post Middle Ads', 'type': 'LinkList', 'sectionId': 'sec_Main_Widgets', 'id': 'LinkList84'}, {'title': 'Table of contents', 'type': 'HTML', 'sectionId': 'sec_Main_Widgets', 'id': 'HTML11'}, {'title': 'Below Posts Ad', 'type': 'LinkList', 'sectionId': 'sec_Bottom_Widgets', 'id': 'LinkList85'}, {'title': 'Popular Posts', 'type': 'PopularPosts', 'sectionId': 'sec_Side_Widgets', 'id': 'PopularPosts01', 'posts': [{'title': '8 Copy-Paste CSS Button Snippets You Can Drop Into Any Site', 'id': 2831315292377854291}, {'title': '8 Copy-Paste Navigation Snippets That Make Menus Feel Instant', 'id': 8187381665675444477}, {'title': 'Ditch the Charting Library: 8 Live CSS/SVG Charts You Can Copy Today', 'id': 2824571352497252964}, {'title': '8 Copy-Paste Hover Card Snippets That Make Any UI Feel Alive', 'id': 544479747105892000}, {'title': '10 Copy-Paste Modal, Popover \x26 Toast Snippets That Don\x27t Feel Bolted On', 'id': 4095565308591851208}]}, {'title': 'Labels', 'type': 'Label', 'sectionId': 'sec_Side_Widgets', 'id': 'Label01'}, {'title': 'Sticky Ad [Desktop]', 'type': 'LinkList', 'sectionId': 'sec_Side_Sticky', 'id': 'LinkList86'}, {'title': 'Take me back', 'type': 'HTML', 'sectionId': 'sec_Error_404', 'id': 'HTML404'}, {'title': 'Organization [BlogTitle]', 'type': 'Image', 'sectionId': 'sec_Footer_Organization', 'id': 'Image21'}, {'title': '', 'type': 'LinkList', 'sectionId': 'sec_Footer_Widgets', 'id': 'LinkList25'}, {'title': 'Credit', 'type': 'HTML', 'sectionId': 'sec_Footer_Bottom', 'id': 'HTML21'}, {'title': 'Mobile Menu', 'type': 'TextList', 'sectionId': 'sec_Mobile_Menu', 'id': 'TextList99'}, {'title': 'Labels', 'type': 'Label', 'sectionId': 'sec_Theme_Hidden', 'id': 'Label41'}, {'title': 'Contact Form', 'type': 'ContactForm', 'sectionId': 'sec_Theme_Hidden', 'id': 'ContactForm41'}, {'title': 'Pageviews last month', 'type': 'Stats', 'sectionId': 'sec_Theme_Hidden', 'id': 'Stats41'}, {'title': 'Cookie Consent [NoTitle]', 'type': 'LinkList', 'sectionId': 'sec_Addon_Widgets', 'id': 'LinkList63'}, {'title': 'Image Uploader', 'type': 'Image', 'sectionId': 'sec_Addon_Widgets', 'id': 'Image61'}]}]);
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header01', 'sec_Header_Title', document.getElementById('Header01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogSearchView', new _WidgetInfo('BlogSearch01', 'sec_Header_Search', document.getElementById('BlogSearch01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_TextListView', new _WidgetInfo('TextList01', 'sec_Header_Icon', document.getElementById('TextList01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList02', 'sec_Header_Icon', document.getElementById('LinkList02'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList03', 'sec_Header_Icon', document.getElementById('LinkList03'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList05', 'sec_Under_Header', document.getElementById('LinkList05'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList07', 'sec_Under_Header', document.getElementById('LinkList07'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog01', 'sec_Main_Widgets', document.getElementById('Blog01'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/1434207229-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/828616780-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList08', 'sec_Main_Widgets', document.getElementById('LinkList08'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList84', 'sec_Main_Widgets', document.getElementById('LinkList84'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML11', 'sec_Main_Widgets', document.getElementById('HTML11'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList85', 'sec_Bottom_Widgets', document.getElementById('LinkList85'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts01', 'sec_Side_Widgets', document.getElementById('PopularPosts01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label01', 'sec_Side_Widgets', document.getElementById('Label01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList86', 'sec_Side_Sticky', document.getElementById('LinkList86'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML404', 'sec_Error_404', document.getElementById('HTML404'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ImageView', new _WidgetInfo('Image21', 'sec_Footer_Organization', document.getElementById('Image21'), {'resize': true}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList25', 'sec_Footer_Widgets', document.getElementById('LinkList25'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML21', 'sec_Footer_Bottom', document.getElementById('HTML21'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_TextListView', new _WidgetInfo('TextList99', 'sec_Mobile_Menu', document.getElementById('TextList99'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label41', 'sec_Theme_Hidden', document.getElementById('Label41'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm41', 'sec_Theme_Hidden', document.getElementById('ContactForm41'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '7154435437619178098', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'contactFormToken': 'AEUoTZr21_zVIFrEN6pXT4SqH0K2:1784111829408', 'submitUrl': 'https://www.blogger.com/contact-form'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_StatsView', new _WidgetInfo('Stats41', 'sec_Theme_Hidden', document.getElementById('Stats41'), {'title': 'Pageviews last month', 'showGraphicalCounter': false, 'showAnimatedCounter': false, 'showSparkline': true, 'statsUrl': '//www.webdevpuneet.com/b/stats?amp\x3d1\x26style\x3dBLACK_TRANSPARENT\x26timeRange\x3dLAST_WEEK\x26token\x3dAFVZEFwbjZXpmW7DZQgpZzh-Rk5QY5F3D13WzGBpCDisAjnTVHa-LtmT83Qj10vJN40aVmRn20vzvsXI763bN8k'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList63', 'sec_Addon_Widgets', document.getElementById('LinkList63'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ImageView', new _WidgetInfo('Image61', 'sec_Addon_Widgets', document.getElementById('Image61'), {'resize': false}, 'displayModeFull'));
</script>
</body>