πŸ“š New Community Library Items


​

​

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.

Welcome To Slater!

Slater resources, updates and community activity

Read more from Welcome To Slater!

We're back from a company-wide summer pause (or winter pause for our Southern Hemisphere team members). Edgar Allan is hitting it's numbers! Let's look at some new Community Library scripts: πŸ‘€ Dynamically loads HTML content based on a random number. This is a quick script we wrote to give a dynamic intro into a soon-to-be-released https://edgarallan.com. https://slater.app/community_library/random-content-aee7f7f2-3ab8-4e6f-887e-ea54cad0ebbf From Jared Malan ✍️ Create a variable for your...

We're rolling into a holiday week in the US. If you need an animated American flag to celebrate, look no further. But! We have users from all over the world. For those outside of the US, try updating the code to make an animated flag of your country (hint: use AI). If you make one, please share. We'll get it added to the Community Library. πŸ‡ΊπŸ‡Έ Render and animate an American flag on a canvas with dynamic waving effects....

We're adding new community library scripts each week. Let's take a look at some of them. πŸ‘Ύ An interactive swarm Create a dynamic grid of squares that react to mouse movement, simulating a swarm-like effect (is it a swarm?). This code is the scaled back version of something we did for a client. We'll show you the finished experience once that projects launches. Play with the example: https://slater-original.webflow.io/swarm Review the code:...