If you’re a Showit user looking to add some extra flair to your website, scroll-triggered animations are a fantastic way to engage your visitors. While Showit is known for its drag-and-drop simplicity, adding custom animations often requires a bit of custom code. In this post, I’ll show you how to use a JavaScript code snippet to create smooth, scroll-triggered animations for your Showit website.
Why Add Scroll-Triggered Animations?
Animations can make your website feel more dynamic and interactive. They help guide your visitors’ attention to key elements, improve the user experience, and make your site stand out. With this custom JavaScript snippet, you can easily add animations that trigger as users scroll through your site.
The Code: Scroll-Triggered Animations for Showit
Here’s the JavaScript code snippet you’ll need to add scroll-triggered animations to your Showit website:
<script>
const animatedClasses = []; // Your Animation Classes Go Here
const options = {
root: null,
rootMargin: '0px',
threshold: 0.2 // Trigger when 20% of the element is visible
};
// Callback function when element intersects viewport
const handleIntersect = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// Check if element has any of our animated classes
const hasAnimatedClass = animatedClasses.some(className =>
entry.target.classList.contains(className)
);
if (hasAnimatedClass) {
// Check for wait-xxx class
const waitClass = Array.from(entry.target.classList).find(cls => cls.startsWith('wait-'));
if (waitClass) {
// Extract the delay value
const delay = parseInt(waitClass.split('-')[1]);
if (!isNaN(delay)) {
// Apply the delay as a style
entry.target.style.animationDelay = `${delay}ms`;
}
}
entry.target.classList.add('animate'); // Add the animation class
observer.unobserve(entry.target); // Stop observing after animation
}
}
});
};
// Create the observer
const observer = new IntersectionObserver(handleIntersect, options);
// Select all elements with the 'observe' class and start observing them
document.addEventListener('DOMContentLoaded', () => {
const elements = document.querySelectorAll('.observe');
elements.forEach(element => observer.observe(element));
});
</script>
How to Add This Code to Your Showit Website
1. Log into your Showit builder
2. Click on your site name at the top left hand side to open your site settings.
3. Under Integrations, click on “Add Custom Code”
4. Click on “Add Code To” and select “Add HTML to the head”.
5. A text box labelled “Head HTML” will populate. Click to open the box, and this is where you paste the code.
How Does This Code Work?
This JavaScript code utilizes the Intersection Observer API, which ensures that any advanced animations applied to an element are triggered only when the element is visible on your screen.
To use this, simply take advantage of Showit’s new feature that allows you to add class names to elements. Add the class name ‘observe‘ to any element you want to animate.
Additionally, we’ll be using specific class names for different animations in conjunction with the ‘observe‘ class. Be sure to check out the advanced animation tutorials I’ve created for a detailed guide on how to use them.
Why is This Code Needed?
This powerful code works in conjunction to the various advanced animation effects I have created for Showit. Once you have installed this code on your website, you can take a look at all the advanced animation effects.
Why This Script Is Perfect for Showit
Showit is a powerful platform for building visually stunning websites, but it doesn’t natively support advanced animations. This custom JavaScript snippet bridges that gap, giving you full control over how and when elements animate. Plus, it’s lightweight and optimized for performance, ensuring your site remains fast and responsive.
Done!
You’ve just taken the first step toward incorporating advanced animations into your website! With this code now installed on your Showit site, you’re ready to start adding these animations to your elements and bringing your design to life.