Fade in onEnter, pin for a while, and then fade out onLeave?

[Metaloholic]

Hi!

 

I tried creating a codepen but didn't get the hang of it for some reason. So I'll do my best to explain my scenario here:

Let's say I have a box a bit down the page. 
 

As I scroll down, and the box enters the viewport. I want the box to move up and fade in at the same time. So basically a gsap.to() with y:0 and opacity: 1. (the box is already set with y:500 and opacity:0)

 

But when the box reaches the center of the viewport, I want it to be pinned for... let's say 500px. So far so good. But I then want to make it move up and fade out upon leaving the viewport as well, and this is the part where I think the pin is making my life hard.

 

This is the code I've got.

//BOX code
        ScrollTrigger.create({
            trigger: "#boxContainer",
            start: "center center", 
            end: "+=500",
            pin: "#boxContainer",
            markers: false
        });
        gsap.set(".box", {
            opacity: 0,
            y: 800
        });
        gsap.to(".box", {
            opacity: 1,
            y: 0,
            scrollTrigger: {
                trigger: ".box",
                start: "0% 100%",
                end: "50% 50%",
                markers: true,
                scrub: true
            }
        });
        gsap.fromTo(".box", {
            opacity: 1,
            y: 0
        },{
            opacity: 0,
            y: -800,
            scrollTrigger: {
                trigger: ".box",
                start: "center 40%",
                end: "100% 0%",
                scrub: true,
                markers: true,
            }
        });

There must be a more simple way to do this, right? Like a timeline? Can I tell an object to be pinned in a timeline?

Cheers!

[mikel]

Hey @Metaloholic,

 

Welcome to the Greensock Forum,

 

There are some ways. Here is an option: one ScrollTrigger, 2. tween is positioned e.g. '+=2'

 

See the Pen abpRmNN by mikeK (@mikeK) on CodePen

 

Happy scrolling ...

Mikel

 

[Metaloholic]

Hey and thanks!

 

Wow. Never thought about a fix like that haha! I’ll give it a try. Thank you!