This GSAP slice hover animation creates a smooth and modern reveal effect for blog cards. When a user hovers over the card, the slices move up and down alternately while fading in. When the mouse leaves, they smoothly return to their original position and fade out.
To use this in Webflow, first create a parent div with the class blog-widget. Inside that parent, add 5 divs with the class slice. This structure is required for the animation to target each slice correctly.
The parent element must have position: relative and overflow: hidden. Each slice should have position: absolute, width: 100%, height: 100%, and an initial opacity: 0 so they remain hidden before hover. Without these settings, the animation will not display correctly.
Add the GSAP CDN before the closing body tag of your Webflow page. Then place your custom animation script below it. If GSAP is not loaded properly, the animation will not run.
You can control how far the slices move by changing the value 120 inside the y function. For a subtle movement, use 60. For a stronger and more dramatic effect, use 200. This allows you to match the motion intensity with your design style.
If you want all slices to move in the same direction instead of alternating up and down, replace the function with a fixed value such as y: -120. This creates a cleaner and more uniform animation style.
Modify the duration values to control speed. Higher numbers make the animation slower and smoother. Lower numbers make it faster and snappier.
You can enhance the smoothness of the animation by changing the ease property. For example, expo.out gives a premium smooth effect, while back.out(1.7) adds a slight bounce for a more dynamic feel.
The stagger value controls the delay between each slice animation. A higher value creates more separation between slices. Setting it to 0 makes all slices animate at the same time.
If your Webflow card uses a different class name, update the selector inside querySelectorAll() so it matches exactly. Always double-check the class name using browser inspect tools to avoid mismatches.
For better stability and to prevent jump glitches, add gsap.set(slices, { y: 0 }); before starting the hover animation. This ensures slices always reset properly before animating.
If the animation is not working, make sure GSAP is properly loaded, class names match exactly, slices are placed inside the card wrapper, and the website is published instead of only previewed.
This script creates a live updating clock on your Webflow page. It displays hours, minutes, and seconds in 12-hour format with AM/PM, updating every second so visitors always see the current local time.
To use it, first add an element with the class live-time where you want the clock to appear, for example: <div class="live-time"></div>. You can style this element in Webflow to match your site’s design using font size, weight, color, and alignment.
Place the script before the closing </body> tag or inside an Embed element. The script finds the .live-time element, gets the current time, converts it to 12-hour format with AM/PM, pads hours, minutes, and seconds with leading zeros, and updates the element every second using setInterval().
You can customize the clock format by switching to 24-hour time (remove the AM/PM logic) or hiding seconds if you only want hours and minutes. You can also style the .live-time class in Webflow Designer to adjust font size, weight, color, and alignment.
The script continuously updates the time by running the updateTime() function every second. It ensures the clock always reflects the visitor’s local time accurately.
If the clock does not appear or update, check that the element has the exact class name live-time, ensure the script is loaded after the Webflow library, and confirm the site is published instead of just previewed.
Good brands don't look designed. They look like
they grew that way. We make that happen.
© 2026 | STUDIO MOARA