An simple and easy way to add an animated reveal effect to your texts and images. Just need to paste the code once, and that's it. No need to change anything, all the settings will be changed in the value of the data attribute.
The code will take care of everything :
it will wrap the element in a Div
it will add an extra Div (overlay) for the effect
you will be able to overwrite the default values, so each animated element can have their own settings
Limitations
Don't animate a parent and one of his child
Don't animate an element that has a position set to absolute
It doesn't work with the Gallery element
Examples
Instructions
Paste the CSS and the Javascript code (bottom of the page). You can paste the CSS in a Code Block. For the Javascript, check How To Use GSAP with Breakdance.
Select your element (a Heading, a text, an Image, an IconBox...) and add this data attribute (Advanced tab) :
To keep the default settings of the animation, you can write whatever you want as a value:
But if you want to change the settings, here are all the default values for the animation:
"speed":".6",
"delay":"0",
"position":"left",
"colorStart":"black",
"colorMid":"black",
"colorEnd":"black",
"easeStart":"sine.inOut",
"easeEnd":"sine.inOut"
}
speed : duration in ms
delay : delay in ms (useful when the animation is at the top of the page, so each element don't run at the same time)
position : left / right / top / bottom
For the easing, check the GSAP Ease Visualizer
If you only want to change the color, you don't need to paste the whole thing, but you can simply add it like that :
"colorStart":"#0000ff",
"colorMid":"white",
"colorEnd":"rgb(255,0,0)"
}
The Magic CSS
position:relative;
overflow:hidden;
}
.gsap-reveal-overlay {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
z-index:100
}
The Oldschool Javascript
let revealobjs = document.querySelectorAll('[data-gsap-reveal]');
revealobjs.forEach((element) => {
let wrapper = document.createElement('div');
wrapper.classList.add("gsap-reveal");
element.parentNode.insertBefore(wrapper, element);
wrapper.appendChild(element);
let overlaydiv = document.createElement('div');
overlaydiv.classList.add("gsap-reveal-overlay");
element.parentNode.insertBefore(overlaydiv, element.nextSibling);
})
// let the animation begins
const revealanim = document.querySelectorAll('.gsap-reveal');
revealanim.forEach((element) => {
const overlay = element.querySelector('.gsap-reveal-overlay');
const mainelement = element.querySelector('[data-gsap-reveal]');
const json = mainelement.dataset.gsapReveal;
const data = JSON.parse(json ?? '{}');
const speed = data.speed ?? .6;
const delay = data.delay ?? 0;
const position = data.position ?? "left";
let var1 = position === "left" ? -101 : position === "right" ? 101 : 0;
let var2 = position === "top" ? -101 : position === "bottom" ? 101 : 0;
const colors = data.colorStart ?? "black";
const colorm = data.colorMid ?? "black";
const colore = data.colorEnd ?? "black";
const eases = data.easeStart ?? "sine.inOut";
const easee = data.easeEnd ?? "sine.inOut";
const revealtm = gsap.timeline({
defaults: {
ease: 'sine.inOut',
duration: speed,
},
scrollTrigger: {
trigger: element,
start: "top bottom",
toggleActions: "play pause resume reset"
}
});
revealtm.fromTo(overlay, {
xPercent: var1,
yPercent: var2,
backgroundColor: colors
}, {
ease: eases,
delay: delay,
xPercent: 0,
yPercent: 0,
backgroundColor: colorm
})
.from(mainelement, {
autoAlpha: 0,
duration: 0.01,
})
.to(overlay, {
ease: easee,
xPercent: -var1,
yPercent: -var2,
backgroundColor: colore
});
})