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
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
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.
