Community forum for knowledge and support

Updated last year

Animated Text Reveal With Gsap And Split Type

At a glance

A community member shared a custom code snippet and asked for help. The code uses GSAP and Split-Type to create a text overlay animation. Some community members provided feedback and shared their own solutions, but there was no explicitly marked answer. The main points are:

- The community member shared a custom code snippet and a video tutorial as a resource.

- Other community members requested a read-only link and the published URL to test the code.

- One community member found the original code to be beyond their skill level, but suggested that someone else in the community might be able to help.

- Another community member switched to a different GSAP-based text overlay solution and offered to share the script if anyone was interested.

- One community member was still trying to figure out how to make the text animation character-by-character without breaking words at the end of the line.

Useful resources

https://www.loom.com/share/5325e742a934466c8330b7953428efc3


Hi guys anyone that can help with this? Sorry if it's not clear.. Here's the custom code:
<style><br />.line {<br /> position: relative;<br />}<br />.line-mask {<br /> position: absolute;<br /> top: 0;<br /> right: 0;<br /> background-color: White;<br /> opacity: 0.65;<br /> height: 100%;<br /> width: 100%;<br /> z-index: 2;<br />}<br /></style>

<script>https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js</a>"></script>
<script>https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js</a>"></script>
<script>https://unpkg.com/split-type</a>"></script>
<script><br />let typeSplit;<br />// Split the text up<br />function runSplit() {<br /> typeSplit = new SplitType(".split-lines", {<br /> types: "lines, words"<br /> });<br /> $(".line").append("<div class='line-mask'></div>");<br /> createAnimation();<br />}<br />runSplit();<br />// Update on window resize<br />let windowWidth = $(window).innerWidth();<br />window.addEventListener("resize", function () {<br /> if (windowWidth !== $(window).innerWidth()) {<br /> windowWidth = $(window).innerWidth();<br /> typeSplit.revert();<br /> runSplit();<br /> }<br />});<br /><br />gsap.registerPlugin(ScrollTrigger);<br /><br />function createAnimation() {<br /> $(".line").each(function (index) {<br /> let tl = gsap.timeline({<br /> scrollTrigger: {<br /> trigger: $(this),<br /> // trigger element - viewport<br /> start: "top center",<br /> end: "bottom center",<br /> scrub: 1<br /> }<br /> });<br /> <a target="_blank" rel="noopener noreferrer" href="http://tl.to">tl.to</a>($(this).find(".line-mask"), {<br /> width: "0%",<br /> duration: 1<br /> });<br /> });<br />}<br /></script>


This is the resource:
https://www.youtube.com/watch?v=yvqSioowCRc

M
N
9 comments

would you mind sharing a read-only link?

apologies - also need the published URL since you have some custom code in here as well - thanks!

okay bad news Nicolò - I think this might be a bit beyond me. I don't think duplicating the function between "let typeSplit" and "runSplit();" will do it - so I wouldn't really know where to start there. This added variable of having it in two places and on different colors might be a bit outside the scope of what this script was set up to do. I'm almost certain that if this requirement was known before writing this code, that it could be done in a simple manner, but I wouldn't know where to begin with that.

Maybe somebody else watching this channel might have something to add?

Thanks , in the end I switched the script and went with another text overlay with Gsap. If you're curious here it's working:
https://alpaca-new-site.webflow.io/
If anyone needs it I can share the script🤝

Still trying to figure out how to make it char by char without breaking words at the end of the line

Btw , is this the right spot to post these kind of threads?

for sure, I just wanted to post mine back out to the channel incase somebody in the community had more insight but looks like you figured it out so thats awesome.

Add a reply
Sign up and join the conversation on Slack