GSAP Skew
Up Animation
This effect is seen all over the web right now. Here is a quick and easy cloneable you can use to apply this effect to any website, super easily.
Setup Guide
01
Add the Head Code
Copy the code below and paste it into the “Inside <head> tag” code section in your page or site settings.
<style>
.word-line {overflow: hidden;}
.skew-up {opacity: 0;}
</style>
02
Add the Body Code
Copy the code below and paste it into the “Before </body> tag” code section in your page or site settings.
<script src="https://unpkg.com/split-type"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js"></script>
<script>
let addAnimation = function () {
$(".skew-up").each(function (index) {
const text = new SplitType($(this), {
types: "lines, words",
lineClass: "word-line"
}); let textInstance = $(this);
let line = textInstance.find(".word-line");
let word = line.find(".word"); let tl = gsap.timeline({
scrollTrigger: {
trigger: textInstance,
start: "top 85%",
end: "top 85%",
onComplete: function () {
$(textInstance).removeClass("skew-up");
}
}
}); tl.set(textInstance, { opacity: 1 }).from(word, {
y: "100%",
skewX: "-6",
duration: 2,
stagger: 0.03,
ease: "expo.out"
});
});
};addAnimation();window.addEventListener("resize", function (event) {
if ($(window).width() >= 992) {addAnimation(); }
});
</script>
03
Assign the Class
Give the text you want the animation to apply to a class of “.skew-up”.