Jump to content
Search Community

animation pin scroll overlap

Ian Robinson test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

I haven't used GSAP in a year or two and feel I'm starting from scratch again. What seems like a very basic animation feature is eluding me despite reading through multiple sources about solutions. How do I get the pinned grey box (.copybox) to stay pinned in the center of the screen for a few hundred pixels past the bottom of the section as I scroll before unpinning and continuing to scroll up with the page (in this case when the turquoise box (.boxholder) meets the bottom of the grey box)?

Thanks in advance!

See the Pen oNaPpQJ by ilrobinson (@ilrobinson) on CodePen

Link to comment
Share on other sites

  • Solution

Hi Ian and welcome back to GSAP Land!!

 

I think the best approach is a single timeline for controlling everything:

gsap
  .timeline({
  scrollTrigger: {
    trigger: "#intro",
    markers: true,
    start: "50% 30%",
    end: "+=100%",
    pin: true,
    scrub: 1
  }
})
  .to(".logo", {
  x: -300,
  opacity: 0
})
  .to(".copybox", {
  x: 0,
  opacity: 1
})
  .to({}, {});

That extra empty to() instance at the end will keep the grey box for a bit on the screen after the animation is completed.

 

Here is a fork of your demo:

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

 

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

Actually just looked back and remembered why I didn't have it in a timeline as I wanted the grey box to come in while the red box is fading out to create a slight overlap. Seems a bit easier to keep them separate to achieve this for just a couple of elements if I'm not mistaken, or is there a simple way to overlap timeline element animations?

Link to comment
Share on other sites

What you need is the position parameter:

gsap
  .timeline({
  scrollTrigger: {
    trigger: "#intro",
    markers: true,
    start: "50% 30%",
    end: "+=100%",
    pin: true,
    scrub: 1
  }
})
  .to(".logo", {
  x: -300,
  opacity: 0
})
  .to(".copybox", {
  x: 0,
  opacity: 1
}, "-=0.25") // Start 0.25 before the previous instance ends
  .to({}, {});

Happy Tweening!

Link to comment
Share on other sites

Now I know I knew that one as I was playing around with that exact thing, but I was placing it incorrectly. Thanks again!

I'm sure I'll be on here again more asking basic questions while I remember the more complex stuff somehow as I start diving back again, but greatly appreciate it!

  • Like 1
Link to comment
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.
×
×
  • Create New...