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
How has your Webflow Conf 2024 experience been? At Edgar Allan, we are especially excited about Webflow Analyze and Optimize and how we can leverage it for our clients and with Wes. However, at Slater, we are most excited about the GSAP acquisition. We’ve been thinking about how we can better support you as you integrate GSAP and Webflow. Let’s explore how you can use Slater with GSAP: Slater Sessions - GSAP + Webflow via Chat with Witt Learn GSAP for Webflow with Aron Korenblit and Cassie...
Do you get confused when undoing (cmd + z) in Slater? We auto-format your code on save. The auto-formatting updates your code, and those updates get pushed into the undo stack. You can now improve your workflow by formatting the code when you choose—not just on save. To gain more control over when your code formats: Turn off auto-format code in the Code Editor Settings Use cmd + shift + f to format your code We added a handful of other improvements: Console logs and debuggers are now...
Last week, we announced that CSS updates were on the way—and now they're here! You can now generate CSS files just as quickly and easily as JS files. In the video below, we give a quick demo of the new functionality. If you have a Smart Script loaded in your project, you can instantly add CSS. In the demo, we also show how to add CSS in the Webflow designer. Give it a try and let us know what you're building! Community Library 🖍️ Text Highlight ColorCSS code for custom text selection. 🅰...