GSAP

Using scrolltrigger

<script>

let mm = gsap.matchMedia();

mm.add("(min-width: 768px)", () => {
//gsap.set('.single-step', { autoAlpha: 0 });

const pinDistance = 1500;

/* section */
ScrollTrigger.create({
trigger: ".slider-images-container",
start: "center center",
end: "+=" + pinDistance,
pin: true,
//markers: true,
id: "two"
})

/* texts inside section */
const stepsTimeline = gsap.timeline({
scrollTrigger: {
trigger: '.slider-images-container',
start: 'top center',
end: "+=" + pinDistance,
scrub: true
}
});

//////////////////////////
//Step 1
//////////////////////////
stepsTimeline.add(() => {
// if scrolling backward, we need to invert which element fades in or out
const forward = stepsTimeline.scrollTrigger.direction > 0;
if(forward){
gsap.to(".header-1", {y:0, autoAlpha: 1, duration: 0.3, delay: 0.3, overwrite: true});
gsap.to(".sub-header-1", {y:0, autoAlpha: 1, duration: 0.3, delay: 0.6, overwrite: true});
gsap.to(".text-1", {y:0, autoAlpha: 1, duration: 0.3, delay: 0.9, overwrite: true});
}
else{
gsap.to(".text-1", {y:-40, autoAlpha: 0, duration: 0.3, overwrite: true});
gsap.to(".sub-header-1", {y:-40, autoAlpha: 0, duration: 0.3, delay: 0.6, overwrite: true});
gsap.to(".header-1", {y:-40, autoAlpha: 0, duration: 0.3, delay: 0.9, overwrite: true});
}
}, 1 || 0.001);

//////////////////////////
//Step 2
//////////////////////////
stepsTimeline.add(() => {
// if scrolling backward, we need to invert which element fades in or out
const forward = stepsTimeline.scrollTrigger.direction > 0;
if(forward){
gsap.to(".text-1", {y:-40, autoAlpha: 0, duration: 0.3, overwrite: true});
gsap.to(".text-2", {y:0, autoAlpha: 1, duration: 0.3, delay: 0.3, overwrite: true});
}
else{
gsap.to(".text-2", {y:-40, autoAlpha: 0, duration: 0.3, overwrite: true});
gsap.to(".text-1", {y:0, autoAlpha: 1, duration: 0.3, delay: 0.3, overwrite: true});
}
}, 2 || 0.001);

//////////////////////////
//Step 3
//////////////////////////
stepsTimeline.add(() => {
// if scrolling backward, we need to invert which element fades in or out
const forward = stepsTimeline.scrollTrigger.direction > 0;
if(forward){
gsap.to(".text-2", {y:-40, autoAlpha: 0, duration: 0.3, overwrite: true});
gsap.to(".sub-header-1", {y:-40, autoAlpha: 0, duration: 0.3, delay: 0.3, overwrite: true});
gsap.to(".sub-header-2", {y:0, autoAlpha: 1, duration: 0.3, delay: 0.6, overwrite: true});
gsap.to(".text-3", {y:0, autoAlpha: 1, duration: 0.3, delay: 0.9, overwrite: true});
}
else{
gsap.to(".text-3", {y:-40, autoAlpha: 0, duration: 0.3, overwrite: true});
gsap.to(".sub-header-2", {y:-40, autoAlpha: 0, duration: 0.3, delay: 0.3, overwrite: true});
gsap.to(".sub-header-1", {y:0, autoAlpha: 1, duration: 0.3, delay: 0.6, overwrite: true});
gsap.to(".text-2", {y:0, autoAlpha: 1, duration: 0.3, delay: 0.9, overwrite: true});
}
}, 3 || 0.001);

//////////////////////////
//Step 4
//////////////////////////
stepsTimeline.add(() => {
// if scrolling backward, we need to invert which element fades in or out
const forward = stepsTimeline.scrollTrigger.direction > 0;
if(forward){
gsap.to(".text-3", {y:-40, autoAlpha: 0, duration: 0.3, overwrite: true});
gsap.to(".sub-header-2", {y:-40, autoAlpha: 0, duration: 0.3, delay: 0.3, overwrite: true});
gsap.to(".header-1", {y:-40, autoAlpha: 0, duration: 0.3, delay: 0.6, overwrite: true});
gsap.to(".header-2", {y:0, autoAlpha: 1, duration: 0.3, delay: 0.9, overwrite: true});
}
else{

gsap.to(".header-2", {y:-40, autoAlpha: 0, duration: 0.3, overwrite: true});
gsap.to(".header-1", {y:0, autoAlpha: 1, duration: 0.3, delay: 0.3, overwrite: true});
gsap.to(".sub-header-2", {y:0, autoAlpha: 1, duration: 0.3, delay: 0.6, overwrite: true});
gsap.to(".text-3", {y:0, autoAlpha: 1, duration: 0.3, delay: 0.9, overwrite: true});
}
}, 4 || 0.001); 

// add blank space to the end of the timeline so that the last element stays for a bit before unpinning.
stepsTimeline.to({}, {duration: 1});

});

</script>

Using GSAP animations on hover

$(function (){
var thumb = $('.item');
thumb.hover(
function(e) { //mouseover
    TweenLite.to($(this), 0.3, { backgroundColor: 'black' });
        },
function(e) { //mouseout
    TweenLite.to($(this), 0.3, { backgroundColor: 'white' });
        });
});

Learning Resources

• Getting Started with the JavaScript Version of the GreenSock Animation Platform (GSAP)