So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at certain points, so below is everything you will need!
You can download the complete template here
The Following are the css class names I used in the tutorial:
my-animated-button
The Following code goes into the Slider Container (reboot-slider):
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/CSSRulePlugin.min.js"></script>
<script>
// Control variables for the hover effect
const hoverScale = 1.2;
const hoverOpacity = 1;
const hoverBorderRadius = "0px";
const hoverBoxShadow = "0px 5px 10px rgba(0, 0, 0, 0.8)";
const normalScale = 1;
const normalOpacity = 1;
const normalBoxShadow = "0px 2px 5px rgba(0, 0, 0, 0.2)";
const animationDuration = 0.3;
const animationEase = "power2.inOut";
// Select all buttons with the class `my-animated-button`
const buttons = document.querySelectorAll(".my-animated-button .elementor-button");
buttons.forEach(button => {
// Store the initial border-radius of the button
const initialBorderRadius = getComputedStyle(button).borderRadius;
// Add event listeners for mouseenter and mouseleave
button.addEventListener("mouseenter", () => {
// Animate the button itself using the control variables
gsap.to(button, {
scale: hoverScale,
opacity: hoverOpacity,
borderRadius: hoverBorderRadius,
boxShadow: hoverBoxShadow,
duration: animationDuration,
ease: animationEase
});
});
button.addEventListener("mouseleave", () => {
// Animate the button back to its original state using the control variables
gsap.to(button, {
scale: normalScale,
opacity: normalOpacity,
borderRadius: initialBorderRadius, // Use the original border-radius
boxShadow: normalBoxShadow,
overflow: "hidden", // Keep overflow hidden on mouse leave as well
duration: animationDuration,
ease: animationEase
});
});
});
</script>