​

​

We launched the Community Library this week. Let's highlight some of the useful resources.

🖨️ Copy to Clipboard

Copy text to clipboard on button click with visual feedback.

​https://slater.app/community_library/copy-to-clibboard-41c30ebc-180e-4e9d-b747-f427f1f05151​

​

​👻 Reveal Words on Scroll

Animate text on scroll with GSAP, ScrollTrigger, and SplitType.​

​https://slater.app/community_library/text-by-words-with-scroll-b0810bf3-64b6-40a4-b5ad-46c784fdcc76​

​

🛀 Remove https:// From Text Link

Remove protocols from anchor texts using jQuery.

​https://slater.app/community_library/remove-https-from-text-link-7a8c89db-0803-4f41-948b-db08a2778c7c​

​

Not what you are looking for? Go check out the full Community Library.

Do you have useful scripts that the Webflow community could use? Let us know and we'll get them added.

​

Javascript 101: The Scroll Event

This week, we’ve been creating experiences that use the scroll event, so we thought we’d discuss it today. Leveraging the scroll event can be extremely useful. (It can also be extremely frustrating.)

The scroll event in JavaScript allows you to execute code when a user scrolls an element or the entire window. This can be used to trigger animations, load content dynamically, or show/hide elements.

Let’s create a simple script that shows an element when it scrolls into view and hides it when it leaves the viewport.

Here is an html element with the ID we will use.

<div id="scroll-element">Hello, I am here!</div>

Here is the Javascript.

const scrollElement = document.getElementById('scroll-element');
function isElementInViewport(el) {
    const rect = el.getBoundingClientRect();
    console.log("scroll triggered", rect.top)
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}
function checkVisibility() {
    if (isElementInViewport(scrollElement)) {
        scrollElement.style.opacity = 1;
    } else {
        scrollElement.style.opacity = 0;
    }
}
window.addEventListener('scroll', checkVisibility);
checkVisibility(); // Check visibility on initial load

Let’s break down what we’re doing here.

• isElementInViewport function checks if the element is in the viewport using getBoundingClientRect.
• checkVisibility function sets the opacity of the element based on whether it is in the viewport or not.
• scroll event listener calls checkVisibility every time the user scrolls.
• Initial call to checkVisibility ensures the correct state when the page loads.

Add this code to a project to see how often the scroll event is triggered. The console.log will give you an idea :). The event is triggered frequently, which can make debugging issues a challenge.

GSAP and Webflow interactions are the more common approaches to handle these type of expereinces but understanding the scroll event is a very useful skill and something you will use often.

​

Your projects, supported by Slater

We have been working on a new Podcast site today, which made me think about Crucible Moments, a podcast site we built for Sequoia Capital.

​https://www.cruciblemoments.com/​

​
​

​

Happy coding!

🤙 the Slater Team

​

If Slater helps you create better websites, please support the team behind it.