Everything looks fine for about twelve seconds. Then the contact forms stop submitting. No error message. No console warning. Just… ...
Someone just exploited a hole in WordPress core that lets them take over your server without logging in. Here's what ...
Updated Elementor and your site broke? I walk through the actual fixes that worked when it happened to a client ...
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 either enter code at certain point into the HTML widget,
so below is everything you will need!
You can download the complete template here
This is put into the HTML Widget:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);
document.addEventListener("DOMContentLoaded", function () {
const lastCard = document.querySelector(".last-pinned");
const pinnedSections = gsap.utils.toArray(".pinned");
let commonEndDistance;
pinnedSections.forEach((section, index, sections) => {
let effect = section.querySelector(".myeffect");
let nextSection = sections[index + 1] || lastCard;
let endScalePoint = `top+=${nextSection.offsetTop - section.offsetTop} top`;
// Set commonEndDistance based on the first section
if (index === 0) {
commonEndDistance = `${nextSection.offsetTop - section.offsetTop}px top`;
}
gsap.to(section, {
scrollTrigger: {
trigger: section,
start: "top top",
end: commonEndDistance,
pin: true,
pinSpacing: false,
scrub: true,
},
});
gsap.fromTo(
effect,
{ scale: 1, opacity: 1, y: 0 },
{
scale: 0.3,
opacity: 0,
y: 400,
ease: "power1.inOut",
scrollTrigger: {
trigger: section,
start: "top top",
end: endScalePoint,
scrub: true,
},
}
);
});
// Apply the same end point to the lastCard as the others
if (lastCard) {
let effect = lastCard.querySelector(".myeffect");
gsap.to(lastCard, {
scrollTrigger: {
trigger: lastCard,
start: "top top",
end: commonEndDistance, // Same end point as other sections
pin: true,
pinSpacing: false,
scrub: true,
},
onStart: () => {
// Ensure lastCard has a lower z-index than the following content
lastCard.style.zIndex = '0'; // Set to lower than following content
}
});
gsap.fromTo(
effect,
{ scale: 1, opacity: 1, y: 0 },
{
scale: 0.3,
opacity: 0,
y: 400,
ease: "power1.inOut",
scrollTrigger: {
trigger: lastCard,
start: "top top",
end: commonEndDistance, // Same end point as other sections
scrub: true,
},
}
);
}
});
</script>