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 points into the HTML widget at the bottom or to name the css classes we have to refer to for the code to work.
You can download the complete template here
if you want to use the images I have in the example then click this button
(please do not use in commercial use, these are copyrighted images)
The css names for all the containers are:
/* css name for the container that houses the left and right containers
.mysection
/* css name for the container that houses the image as a background
.imageEffect
/* css name for the container that houses the text content next to the image
.textContent
/* css name for the heading widget that triggers the animation
.headingTrigger
The GSAP script used to create the fading image effect on scroll.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/ScrollTrigger.min.js"></script>
<script>
let mediaAnimation = gsap.matchMedia();
ScrollTrigger.defaults({
markers: false
});
// colours of backgrounds in order
const colors = ["#2C3531", "#116466", "#D9B08C", "#FFCB9A", "#D1E8E2"];
// Desktop animations of images and colour fade
mediaAnimation.add("(min-width: 660px)", () => {
const details = gsap.utils.toArray(".textContent:not(:first-child)");
const photos = gsap.utils.toArray(".imageEffect:not(:first-child)");
gsap.set(photos, { clipPath: 'inset(0% 0% 0% 0%)', autoAlpha: 0.01 });
const allPhotos = gsap.utils.toArray(".imageEffect");
details.forEach((section, i) => {
let bgColor = colors[i + 1];
ScrollTrigger.create({
trigger: section,
start: "250 bottom",
end: "+=100%",
onToggle: self => {
if (self.isActive) {
gsap.to(".mysection", { backgroundColor: bgColor });
} else if ((i === 0 && self.direction < 0) || (i === details.length - 1 && self.direction > 0)) {
gsap.to(".mysection", { backgroundColor: "#2C3531" });
}
}
});
});
details.forEach((detail, index) => {
let headline = detail.querySelector(".headingTrigger");
let animation = gsap.timeline()
.to(photos[index], { clipPath: 'inset(0% 0% 0% 0%)', autoAlpha: 1, duration: 1.5 })
.set(allPhotos[index], { autoAlpha: 1, duration: 1.5}
);
ScrollTrigger.create({
trigger: headline,
start: "top 120%",
end: "top 80%",
animation: animation,
scrub: true,
markers: false
});
});
});
// Mobile animations of colour fade
mediaAnimation.add("(max-width: 665px)", () => {
const details = gsap.utils.toArray(".textContent:not(:first-child)");
details.forEach((section, i) => {
let bgColor = colors[i + 1];
ScrollTrigger.create({
trigger: section,
start: "200 bottom",
end: "+=100%",
onToggle: self => {
if (self.isActive) {
gsap.to(".mysection", { backgroundColor: bgColor });
} else if ((i === 0 && self.direction < 0) || (i === details.length - 1 && self.direction > 0)) {
gsap.to(".mysection", { backgroundColor: "#2C3531" });
}
}
});
});
});
</script>