Oxygen already allows us to configure animations that are triggered on scroll. It's the Animate On Scroll feature and even if it works well, it's not very easy and convenient to customize it.
With GSAP, we can build our own animations, and have full control over them.
Let's start with a basic example. The following image will be animated only once. It will come from the left because we have set his horizontal position to -200% :
var imganim1 = gsap.to("#img1", {
x: 0,
autoAlpha: 1,
duration: 2.5,
ease: "bounce.out"
});
ScrollTrigger.create({
trigger: "#section-3-1330",
start: "bottom bottom",
end: "top top",
animation: imganim1,
toggleActions: "play none none none"
})Another example, with a 3D animation. Scroll up and down to see what it's happening (the animation will play in reverse when it leaves the viewport).
It's all about toggleActions and the start / end properties.
gsap.set("#img2", {transformPerspective: 700});
const imganim2 = gsap.to("#img2", {
x: 0,
rotateY: 720,
rotateX: 0,
autoAlpha: 1,
duration: 2.5,
ease: "power4.out"
});
ScrollTrigger.create({
trigger: "#section-12-1330",
start: "bottom bottom",
end: "top top",
animation: imganim2,
toggleActions: "play reverse play reverse"
})We can create complex animations, by using the Timeline feature, as explained in the previous tutorial.
The possibilities are endless!
gsap.set("#img3", {transformPerspective: 700});
const imganim3 = gsap.timeline();
imganim3.to("#img3", {
autoAlpha: 1,
scale: 1,
duration: 2.5,
ease: "elastic.out(1,0.3)"
})
imganim3.to("#img3", {
rotateX: 12,
rotateY: 30,
opacity: .5,
duration: 1,
ease: "power4.out"
});
ScrollTrigger.create({
trigger: "#section-24-1330 ",
start: "top bottom",
end: "bottom top",
animation: imganim3,
toggleActions: "play pause resume reset"
})Same animation everywhere!
It's nice but how to do if we want to apply the same animation to several elements?
In this example, we will animated all the heading (H2) of a page.
const titleanim = document.querySelectorAll("h2");
titleanim.forEach((element) => {
gsap.from(element, {
x: 100,
autoAlpha: 0,
scrollTrigger: {
trigger: element
}
});
})All the headings of the following section will be animated (only once) :
THIS IS A COOL TITLE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rhoncus malesuada tempor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla eu tempus ipsum. Vestibulum sit amet volutpat lacus, eget tempus orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras et sagittis arcu, non congue tortor. Proin pellentesque nisl non diam egestas scelerisque. Aenean malesuada risus ut efficitur iaculis. In consequat egestas lacinia. Curabitur aliquam augue sed vestibulum aliquam. Phasellus sollicitudin lacus id leo elementum semper. Maecenas bibendum leo nunc, sit amet tristique risus pulvinar eget.
AND HERE IS ANOTHER ONE
Pellentesque a urna neque. Suspendisse in mattis lectus. Donec enim diam, pellentesque vel augue in, posuere posuere turpis. Vestibulum egestas sem nec arcu varius ullamcorper. Cras mi erat, ultrices id risus vitae, dignissim luctus ipsum. Morbi vel nunc est. Aenean dapibus mollis nisl, malesuada tristique augue ullamcorper ut. Suspendisse vitae ante ut enim laoreet interdum.
Integer non tortor tortor. Proin nunc mi, ultrices id velit vitae, semper condimentum mauris. Sed laoreet varius aliquam. Phasellus tempor vitae lacus eu hendrerit. Nulla at nulla tempus, tincidunt nunc dignissim, hendrerit augue. Suspendisse egestas auctor facilisis. Curabitur luctus tincidunt posuere.
THAT ONE IS COOL TOO
In luctus urna sit amet ex porttitor convallis. Integer fringilla sagittis nibh. Pellentesque et sagittis lectus. Pellentesque pharetra, augue vitae faucibus scelerisque, augue justo vulputate turpis, non semper sem arcu eu enim. Proin quis ipsum felis. Donec ac lobortis sem. Cras nec lacinia urna.
Sed interdum sem id nulla aliquam sollicitudin. Integer ac congue sapien. Nunc commodo velit non sapien porta, dictum scelerisque quam posuere. In mattis egestas sem ut blandit. Maecenas neque dui, posuere vitae fermentum et, tempus nec ligula. Curabitur aliquet velit elit, non tincidunt odio porttitor sit amet. Pellentesque venenatis fermentum venenatis.
Here is another example with some images.
This time the animations will play again when we scroll up and down.
const imgzoom = document.querySelectorAll(".content img");
imgzoom.forEach((element) => {
gsap.from(element, {
autoAlpha: 0,
duration: 1.5,
scale: 0,
ease: "bounce.out",
scrollTrigger: {
trigger: element,
start: "top bottom",
end: "bottom top",
toggleActions: "play reverse play reverse"
}
});
})THIS IS A COOL TITLE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rhoncus malesuada tempor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla eu tempus ipsum. Vestibulum sit amet volutpat lacus, eget tempus orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras et sagittis arcu, non congue tortor. Proin pellentesque nisl non diam egestas scelerisque. Aenean malesuada risus ut efficitur iaculis. In consequat egestas lacinia. Curabitur aliquam augue sed vestibulum aliquam. Phasellus sollicitudin lacus id leo elementum semper. Maecenas bibendum leo nunc, sit amet tristique risus pulvinar eget.
AND HERE IS ANOTHER ONE
Pellentesque a urna neque. Suspendisse in mattis lectus. Donec enim diam, pellentesque vel augue in, posuere posuere turpis. Vestibulum egestas sem nec arcu varius ullamcorper. Cras mi erat, ultrices id risus vitae, dignissim luctus ipsum. Morbi vel nunc est. Aenean dapibus mollis nisl, malesuada tristique augue ullamcorper ut. Suspendisse vitae ante ut enim laoreet interdum.
Integer non tortor tortor. Proin nunc mi, ultrices id velit vitae, semper condimentum mauris. Sed laoreet varius aliquam. Phasellus tempor vitae lacus eu hendrerit. Nulla at nulla tempus, tincidunt nunc dignissim, hendrerit augue. Suspendisse egestas auctor facilisis. Curabitur luctus tincidunt posuere.
THAT ONE IS COOL TOO
In luctus urna sit amet ex porttitor convallis. Integer fringilla sagittis nibh. Pellentesque et sagittis lectus. Pellentesque pharetra, augue vitae faucibus scelerisque, augue justo vulputate turpis, non semper sem arcu eu enim. Proin quis ipsum felis. Donec ac lobortis sem. Cras nec lacinia urna.
Sed interdum sem id nulla aliquam sollicitudin. Integer ac congue sapien. Nunc commodo velit non sapien porta, dictum scelerisque quam posuere. In mattis egestas sem ut blandit. Maecenas neque dui, posuere vitae fermentum et, tempus nec ligula. Curabitur aliquet velit elit, non tincidunt odio porttitor sit amet. Pellentesque venenatis fermentum venenatis.
Don't forget to check this page if you want to learn more about GSAP: