\n

```

\n

How It Works:

\n

CSS Transitions: We apply a transition to smoothly change the background color. In this case, the box will smoothly transition its color when it reaches certain stages in the animation.

\n

CSS Animations: We use @keyframes to animate the boxโ€™s movement from left to right, changing its position and color at key stages (0%, 50%, and 100%).

\n

User Interaction: Clicking the button adds the animate class to the box, triggering the movement and color change. The animation takes 2 seconds to complete, and the background color smoothly transitions thanks to the transition property.

\n

This approach integrates both CSS transitions for smooth property changes and CSS animations for complex, multi-step movements. By combining them, you can create more engaging user interactions with minimal JavaScript, leveraging the power of CSS for visual effects.

\n

Happy coding!

\n

โ€‹

\n

๐Ÿค™ the Slater Team

\n

โ€‹

\n

โ€‹

\n

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

\n
Become a Pro Slater User
\n\n\n\n","recentPosts":[{"id":7606258,"title":"๐ŸŽ… Merry Christmas and a happy New Year","slug":"merry-christmas-and-a-happy-new-year","status":"published","readingTime":1,"campaignCompletedAt":"2024-12-23T17:30:16.000Z","publishedAt":"2024-12-23T17:30:16.000Z","orderByDate":"2024-12-23T17:30:16.000Z","timeAgo":"3 days","thumbnailUrl":"https://embed.filekitcdn.com/e/f2wTcXHNz6CCWc9a5vGTv3/8ZxHHAV3Z2NzLd9MJGAnuw/email","thumbnailAlt":"","path":"posts/merry-christmas-and-a-happy-new-year","url":"https://slater.kit.com/posts/merry-christmas-and-a-happy-new-year","isPaid":null,"introContent":"The team behind Slater would like to wish you a Merry Christmas and a happy New Year! ๐ŸŽ„๐ŸŽ…๐ŸŽ Get the Santa ASCII art: https://slater.app/projects/11431/pages/27608 Happy coding! ๐Ÿค™ the Slater Team If Slater helps you create better websites, please support the team behind it. Become a Pro Slater User","campaignId":17709207,"publicationId":14255672,"metaDescription":""},{"id":7537398,"title":"๐Ÿ—‚๏ธ Files","slug":"files","status":"published","readingTime":2,"campaignCompletedAt":"2024-12-13T18:14:13.000Z","publishedAt":"2024-12-13T18:14:13.000Z","orderByDate":"2024-12-13T18:14:13.000Z","timeAgo":"13 days","thumbnailUrl":"https://embed.filekitcdn.com/e/f2wTcXHNz6CCWc9a5vGTv3/4FZpgpss7uN1AgRNMpqRiS/email","thumbnailAlt":"","path":"posts/files","url":"https://slater.kit.com/posts/files","isPaid":null,"introContent":"Earlier this year, we built figdam.com. It is currently used by several of our clients to host files and watermark PDFs. Weโ€™d like to bring this file hosting functionality to Slater users. With that in mind, where do you currently store files that Webflow doesnโ€™t support? Would this feature be useful to you? What file hosting features do you need? Let us know. JS 101: File types File storage? Javascript? Let's consider all of the different file types that you could host and then retrieve and...","campaignId":17627169,"publicationId":14173259,"metaDescription":""},{"id":7528614,"title":"๐Ÿ‘‹ EA Office Hours this Friday, 3 PM EST","slug":"ea-office-hours-this-friday-3-pm-est","status":"published","readingTime":1,"campaignCompletedAt":"2024-12-12T21:55:16.000Z","publishedAt":"2024-12-12T21:55:16.000Z","orderByDate":"2024-12-12T21:55:16.000Z","timeAgo":"14 days","thumbnailUrl":"https://embed.filekitcdn.com/e/f2wTcXHNz6CCWc9a5vGTv3/k23TtrHKgV6qYT84ZW7Bqr/email","thumbnailAlt":"","path":"posts/ea-office-hours-this-friday-3-pm-est","url":"https://slater.kit.com/posts/ea-office-hours-this-friday-3-pm-est","isPaid":null,"introContent":"Hi, Just a reminder that Kendra and Mason will be hosting an EA Office Hours Zoom this Friday, the 13th (spookyโ€ฆ) to chat about topics relating to Chapter 1: Sales for Creative Types. Sign up if you can make it, and bring your questions. Letโ€™s get past any lingering sales ick together. Register to join us this Friday, 12/13 here. Also, if you canโ€™t make it this week, weโ€™re thinking about doing it again next Friday, 12/20 as well, if anyone is game? To ring in the holiday break, weโ€™ll chat...","campaignId":17617126,"publicationId":14163203,"metaDescription":""}],"newsletter":{"formId":4967504,"productId":null,"productUrl":null,"featuredPostId":null,"subscribersOnly":false},"isPaidSubscriber":false,"isSubscriber":false,"originUrl":"https://slater.kit.com/posts/smart-script-css","creatorProfileName":"Welcome To Slater!","creatorProfileId":1135261}๐Ÿ‘ฉ๐Ÿผโ€๐ŸŽจ Smart Script CSS

๐Ÿ‘ฉ๐Ÿผโ€๐ŸŽจ Smart Script CSS


โ€‹

โ€‹

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!

โ€‹

video previewโ€‹

โ€‹

Community Library

๐Ÿ–๏ธ Text Highlight Colorโ€‹
CSS code for custom text selection.

๐Ÿ…ฐ Improved Font Renderingโ€‹
CSS for font smoothing, text rendering, and scroll behavior on the body element.

๐Ÿ“— Richtext Resetโ€‹
Removes top margin of the first and bottom margin of the last child elements in a rich text container.

โ€‹

Have you added a useful script to your library? Share it with us!

โ€‹

--

Javascript 101: CSS & JS Part II

In the last Javascript 101, we explored how to modify styles with JavaScript to create dynamic websites. We looked at manipulating inline styles, toggling CSS classes, and updating CSS variables to respond to user input. Each approach gave us a different level of control over styling changes, and by keeping animations smooth and maintainable, we can create interactive user experiences.

Now, letโ€™s combine what we learned last week with CSS transitions and animations. Weโ€™ll use CSS transitions for smooth property changes and @keyframes animations for more complex effects.

โ€‹

```
<style>
.box {
width: 100px;
height: 100px;
background-color: lightblue;
position: relative;
transition: background-color 0.5s ease; /* Transition for color changes */
}

@keyframes moveBox {
0% { left: 0; }
50% { left: 100px; background-color: tomato; } /* Color changes midway */
100% { left: 200px; background-color: skyblue; }
}

.animate {
animation: moveBox 2s forwards; /* Triggers the movement animation */
}
โ€‹
</style>
โ€‹
<button id="animateBtn">Animate Box</button>
<div id="box" class="box"></div>
โ€‹
<script>
const button = document.getElementById('animateBtn');
const box = document.getElementById('box');
button.addEventListener('click', () => {
box.classList.add('animate');
});
</script>

```

How It Works:

CSS Transitions: We apply a transition to smoothly change the background color. In this case, the box will smoothly transition its color when it reaches certain stages in the animation.

CSS Animations: We use @keyframes to animate the boxโ€™s movement from left to right, changing its position and color at key stages (0%, 50%, and 100%).

User Interaction: Clicking the button adds the animate class to the box, triggering the movement and color change. The animation takes 2 seconds to complete, and the background color smoothly transitions thanks to the transition property.

This approach integrates both CSS transitions for smooth property changes and CSS animations for complex, multi-step movements. By combining them, you can create more engaging user interactions with minimal JavaScript, leveraging the power of CSS for visual effects.

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!

The team behind Slater would like to wish you a Merry Christmas and a happy New Year! ๐ŸŽ„๐ŸŽ…๐ŸŽ Get the Santa ASCII art: https://slater.app/projects/11431/pages/27608 Happy coding! ๐Ÿค™ the Slater Team If Slater helps you create better websites, please support the team behind it. Become a Pro Slater User

Earlier this year, we built figdam.com. It is currently used by several of our clients to host files and watermark PDFs. Weโ€™d like to bring this file hosting functionality to Slater users. With that in mind, where do you currently store files that Webflow doesnโ€™t support? Would this feature be useful to you? What file hosting features do you need? Let us know. JS 101: File types File storage? Javascript? Let's consider all of the different file types that you could host and then retrieve and...

Hi, Just a reminder that Kendra and Mason will be hosting an EA Office Hours Zoom this Friday, the 13th (spookyโ€ฆ) to chat about topics relating to Chapter 1: Sales for Creative Types. Sign up if you can make it, and bring your questions. Letโ€™s get past any lingering sales ick together. Register to join us this Friday, 12/13 here. Also, if you canโ€™t make it this week, weโ€™re thinking about doing it again next Friday, 12/20 as well, if anyone is game? To ring in the holiday break, weโ€™ll chat...