β β We launched the Community Library this week. Let's highlight some of the useful resources. π¨οΈ Copy to ClipboardCopy 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 ScrollAnimate 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 LinkRemove protocols from anchor texts using jQuery. β 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 EventThis 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.
Here is the Javascript.
Letβs break down what weβre doing here.
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 SlaterWe 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.
|
Slater resources, updates and community activity
You may recall that the original Slater had access controls for projects and files. We didn't want just anyone going in there and rewriting our Javascript. However, managing access for teammates became cumbersome (I even added a "god mode" to give myself access to any project or file). Since we generally trusted each other and never had issues, we decided to leave it out of the latest version of Slater. That said, we understand that some teams work differently, and maintaining control can be...
We're going to take a brief break from the regular newsletter format to celebrate the release of ask.edgarallan.com. Today, let's hear from Mason Poe, the Founder of Edgar Allan and Slater. I'm thrilled to announce the launch of ask.edgarallan.com and the start of a new conversation. We can all feel it: the web is changing in ways that seem both dramatic and, in a weird way, imperceptible. At times, itβs hard to know where to start exploring what could be next. Sometimes, when you think...
Our new Edgar Allan website, which we're launching next week π€«, uses over 3,000 lines of code. Itβs a bit unwieldy! To better support the new EA website and similar JavaScript-heavy projects, weβve added slater_import. This feature allows you to write a function once and then reuse it across all the files in your project. You can see how to use it here. β¬οΈ Not ready to watch the video? No problem. To import a file, simply start typing the name of the file you want to import and click on the...