Pin timeline fade in / fade out content without taking up space in DOM

[MarkD617 5 Likes (Newbie)]

I'm using GSAP in a vue js / nuxt project and am trying to have a simple PIN on a section and then fade out content and fade in on scroll. My issue now is the content that is being hidden to start is taking up space in the DOM and creating a large section if that makes sense. It is just small paragraphs I am trying to fade out and In in the same spot.

 

Looking at the code, user scrolls to the "pin" and only the first P "This is P One" is showing. as user continues to scroll "This is P one" fades out and "This is P two" fades in.

 

<div class="timeline-content" id="pin">
<p class="history-description" id="one2020">
this is P One
</p>
<p class="history-description" id="two2020">
This is P Two
</p>
<p class="history-description" id="three2020">
 This is P Three
</p>
</div>
</div>


mounted() {
const gsap = this.$gsap;

gsap
.timeline({
scrollTrigger: {
trigger: '#pin',
scrub: 0.5,
pin: true,
},
})
  
.fromTo('#one2020', 1, { opacity: 1 }, { opacity: 0 })
.fromTo('#two2020', 1, { opacity: 0 }, { opacity: 1 })
.to('#two2020', 1, { opacity: 0 })
.fromTo('#three2020', 1, { opacity: 0 }, { opacity: 1 })
.to('#three2020', 1, { opacity: 0 });
},

 

[Cassie 5,385 Likes (Superhero)]

Hi there Mark.

This sounds like a layout issue which is pretty hard to debug blind - could you put together a minimal demo for us?

No need to include Vue - just the basic DOM structure and the GSAP timeline.
 

[MarkD617 5 Likes (Newbie)]

Hi Cassie!

 

I created a similar codepen as to what I am trying to achieve. I'm creating a years timeline and want to pin at "2020" and cycle through 3 different content paragraphs right next to the year title. As you can see now the first paragraph starts at the top. I was thinking of possibly positioning the content paragraphs absolutely?

 

See the Pen MWmmpEw by mDDDD (@mDDDD) on CodePen

[Carl 11,164 Likes (Superhero)]

Yeah, you're going to want to find a way to get each paragraph to sit on top of each other, which is totally up to your css positioning method of choice. Using position absolute on a container div for each paragraph is probably the most common approach and totally fine.

 

I'm a fan of the grid layering technique shown below. 

 

See the Pen OJmmmPK?editors=0100 by snorkltv (@snorkltv) on CodePen

 

Scrolling through things to fade them in and out is tricky and not the best user experience. In my demo above its pretty easy to scroll fast and just blow right through each section.

 

 

here's another demo that doesn't use ScrollTrigger

See the Pen JjYJpgw by snorkltv (@snorkltv) on CodePen

 

 

[mikel 4,775 Likes (Superhero)]

Hey @Carl,

 

And I'm a fan of your slider trick

 

const slider = gsap.fromTo(action, {time:dur}, {time:action.duration()-dur, paused:true})

 

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

 

Thanks and happy tweening ...

Mikel

[MarkD617 5 Likes (Newbie)]

@Carl Thank you for the help! I agree the fading in and out of content could be a bad user experience. How would I go about pinning at the section and then scrolling through the content in the timeline rather than a fade out fade in approach? I setup a codepen to demonstrate. Basically I would like to PIN at a section and then have an inner scroll while pinned. Is this possible with ScrollTrigger?

 

See the Pen dyWRqJW by mDDDD (@mDDDD) on CodePen

[Carl 11,164 Likes (Superhero)]

I think the trick is to just add some motion. the ScrollTrigger Demos page has loads of great examples.

 

See the Pen 6a2480c123d88dc391faba0ea5cc590f by akapowl (@akapowl) on CodePen

 

See the Pen rNOebyo by GreenSock (@GreenSock) on CodePen

 

See the Pen NWxNEwY by GreenSock (@GreenSock) on CodePen

[MarkD617 5 Likes (Newbie)]

Nice! Thank you for the direction! I'm stumped on one more thing with scrolltrigger. What is the best practice / way of chaining a timeline within a pin? What I would like to do is for each MAIN SLIDE while pinned cycle through the content within that SLIDE and THEN slide up onto the next MAIN SLIDE and cycle through it's content and so forth until all MAIN SLIDES are complete and then unpin.

 

See the Pen dyWRqJW by mDDDD (@mDDDD) on CodePen

[GreenSock 18,577 Likes (Superhero)]

I glanced at your demo and I'm not really sure what you want to have happen animation-wise in each pin because on the first one you've got a lot of text so I assume you might want to fake-scroll that up? Or maybe you want to fade in each paragraph? There are a lot of possibilities but the general concept is to just loop through your sections, do a timeline for each that gets pinned:

 

sections.forEach(section => {
  let tl = gsap.timeline({
    scrollTrigger: {
      trigger: section,
      start: "top top",
      end: "+=800",
      pin: true,
      scrub: true
    }
  });
  // now populate it with your animations for each sub-part:
  tl.to(...)
    .to(...)
});

 

[MarkD617 5 Likes (Newbie)]

yes "fake-scroll" up will work for this. I'm reading docs / browsing examples but I'm still confused on how to first PIN a main slide and then animate the sub parts inside the main slide. Sorry for all the q's just really stuck on this one.

[GreenSock 18,577 Likes (Superhero)]

I don't have time to do it all for you, but here's a basic setup where it pins and then scrubs a timeline that just animates yPercent of the contents to -100. Obviously you'll need to fix your CSS/layout issues and decide how you want things to animate exactly, but hopefully this at least gets you moving in the right direction. 

See the Pen NWjveNX?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Good luck!