Community forum for knowledge and support

Updated last year

Animated Text Reveal With Gsap And Split Type

At a glance

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