Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
MarkD617

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

Recommended Posts

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 });
},
 
Link to post
Share on other sites

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.
 

  • Like 1
Link to post
Share on other sites

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

Link to post
Share on other sites

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

 

 

  • Like 5
Link to post
Share on other sites

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

  • Like 3
Link to post
Share on other sites

@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

Link to post
Share on other sites

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

Link to post
Share on other sites

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(...)
});

 

Link to post
Share on other sites

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.

Link to post
Share on other sites

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!

  • Like 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×