β β β 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. βhttps://slater.app/community_library/american-flag-a0bc5d89-a5cd-4910-a245-db0274d495f3β From Jared Malanββ β βποΈ Script for a hover-based tab interface with dynamic content display. βhttps://slater.app/community_library/tabs-switch-on-hover-6bbca64b-b43b-4119-883c-60b02e3673cfβ From Andrea Morgan β β π Toggle visibility of text sections with "Read More" buttons βhttps://slater.app/community_library/expand-text-on-click-d8dd845f-ee47-4c37-b884-467b9da2bbedβ From Andrea Morgan β β β βJavascript 101: Javascript and CanvasIn the animated flag script, we leverage the Apple first introduced the A short time later, other browsers became interested in the technology and the W3C (World Wide Web Consortium) took over to provide a formal standard. Let's look at some basics for interacting with the 1. Add a canvas to your Webflow project:
β 2. Access the canvas with JavaScript
The β 3. Draw on the Canvas Now, you can use the Draw a Rectangle
β Draw a Line
β Draw a Circle
β Draw Text
β That's the basics. Try experimenting with different shapes and methods to get comfortable with the Canvas API. Maybe generate a flag. :) β Your projects, supported by SlaterOver the last couple of emails, we discussed code that was used for https://www.sequoiacap.com/trainingdata/. It's live. Check it out. β 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. π °...