How to create wavy scrolling text

We can have text follow a curved SVG path with the <textPath> element. This will not animate the marquee effect though. That part appears to be implemented with JavaScript by constantly altering the text’s startOffset.

There’s possibly more to this than what I’ve seen on the page. The responsible JS code is all minified so it’s difficult to make sense of it. Hopefully this helps at least somewhat.

Hi @ekspress , I came here looking for a solution to the same problem. I was able to manage the curvature using a textpath xlinked to an svg, but I’m struggling to figure out how to write the javascript to animate the startOffset? I was wondering if you might be so kind as to post the solution you ended up using? It looks fantastic on the page you designed by the way (as does the rest of the page)!

Thanks very much!

Thanks for the kind words about the home page. I’m afraid I don’t know exactly how it was done. I also was unable to figure out how to use javascript to animate the text so I paid someone to do it for me!

I found the custom code that was used to animate the marquee:

<script>
document.addEventListener('DOMContentLoaded', () => {
    function createMarquee(pathSelector, waveLength, direction) {
        const path = document.querySelector(pathSelector);
        let offset = direction === 'leftToRight' ? -waveLength : 0;

        function increment() {
            if (window.innerWidth < 768) {
                if (direction === 'leftToRight') {
									// this is for tabe and phone 
                    offset += 5; // Left to right
                    if (offset > 0) {
                        offset = -waveLength;
                    }
                } else {
									// this is for tabe and phone 
                    offset -= 5; // Right to left
                    if (offset < -waveLength) {
                        offset = 0;
                    }
                }
            } else {
                if (direction === 'leftToRight') {
									// this is for desktop
                    offset += 1; // Left to right
                    if (offset > 0) {
                        offset = -waveLength;
                    }
                } else {
									// this is for desktop
                    offset -= 1; // Right to left
                    if (offset < -waveLength) {
                        offset = 0;
                    }
                }
            }
            path.setAttribute('startOffset', offset);
            requestAnimationFrame(increment);
        }

        increment();
    }
    createMarquee('.marqury_one textPath', 3000, 'rightToLeft');
    createMarquee('.marqury_two textPath', 3000, 'leftToRight');
})
</script>