How to create a Reveal Effect with GSAP

SUPA COOL
REVEAL EFFECT
MADE WITH THE FANTASTIC
GSAP LIBS
FOR BREAKDANCE BUILDER

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

Different positions
FROM THE LEFT
FROM THE RIGHT
FROM THE TOP
FROM THE BOTTOM
Different colors
FULL WHITE
WHITE RED WHITE
WHITE YELLOW RED
Easing effects
BOUNCE.OUT
BACK.OUT
ELASTIC.OUT
Other elements
supamike_character_design_hacker_illustration_minimalist__chine_bca3b5d5-8079-498d-af2d-5e6e3b4ff156
work with
IMAGES

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) :

data-gsap-reveal

To keep the default settings of the animation, you can write whatever you want as a value:

gsap-reveal-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)"
}
gsap-reveal-color-example

The Magic CSS

.gsap-reveal {
position:relative;
overflow:hidden;
}
.gsap-reveal-overlay {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
z-index:100
}

The Oldschool Javascript

// Get the element to be wrapped + add a overlay div
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
});
})