Jump to content
Search Community

On ScrollTrigger Start, animate element from xPercent: -100, pin element to top & bottom of viewport

livlove test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

Hey guys,

 

I've been hacking away at this for some time and I'm really stuck.

 

I have achieved most of what I want, but the pinned element won't stick to the top of the viewport.

 

Some things that I've noticed:

  1. If I scroll to the position where my trigger and start position are on the same pixel, and refresh, then scroll down, the .purple div will be at the top of the viewport
  2. If start at the top of the screen where my initial scrolltrigger is around 500px from the start trigger, then scroll down to the start trigger, the .purple top position will be -500px
  3. I've tried to set fixed, absolute, height: 100vh, 100%, and top: 0; bottom: 0;

 

Some questions I've got:

  1. Is there a way to set what an element pins to, instead of it pinning to the trigger?
  2. Why is the offset of the trigger and start point adding +/- top values to the pinned section?
  3. Does ScrollSmoother help solve this?

 

Thanks in advance for any help! Going to keep trying now :]

 

See the Pen bGQNOQz by Parvez-Noor (@Parvez-Noor) on CodePen

Link to comment
Share on other sites

First off! Hi @livlove welcome to the forum and thanks for being a Club Greensock member 🎉

 

1 hour ago, livlove said:
  • Is there a way to set what an element pins to, instead of it pinning to the trigger?

I'm not completely  sure what you're asking. Some times people use two ScrollTriggers one for pinning and one for animating, this is only needed in really specific cases, but can be handy at times. 

 

1 hour ago, livlove said:
  • Why is the offset of the trigger and start point adding +/- top values to the pinned section?

Have you maybe seen the common mistake article about using ScrollTrigger? Mainly the logic issue "Creating to() logic issues". This talks about animating the trigger element, but it also applies animating the pinned element. 

 

1 hour ago, livlove said:

Does ScrollSmoother help solve this?

No I would not think so. 

 

Here is a fork of your pen where the pin is on the .animation-wrap instead of the .purple div. I've also removed the fixed from the CSS, because it is better to let ScrollTrigger handle everything. You could also wrap your .purple div in a container and have that as the pinned element, this will fix the logic issues, but will require some extra CSS. Hope it helps and happy tweening! 

 

See the Pen mdQyoMV?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Did some more digging and maybe changing the fixed to absolute fixes the issue, but I would still not be comfortable animating the element that get's pinned, better is to use separate elements for that to fix potential logic issues

 

See the Pen YzRPgvy by mvaneijgen (@mvaneijgen) on CodePen

 

  • Like 4
Link to comment
Share on other sites

Yep, @mvaneijgen is exactly right. It's almost never a good idea to animate the pinned element, but the bigger issue here was that you set position: fixed on that element. Let's say an element gets pinned for 100px...that means that when it gets UNPINNED, it must get a transform: translateY() applied to offset its natural position by 100px. In your situation, though, you had position: fixed, so it would get locked to the viewport itself, and that transform shifted it off-screen. 

 

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

 

Side note: I noticed you're using a pretty old version of GSAP. I'd recommend updating :)

 

Good luck!

  • Like 2
Link to comment
Share on other sites

Hey guys,

 

Thanks for much for the swift response and feedback, it's super useful.

 

@mvaneijgen thanks for the adjusted code. If I'm unable to implement the animation how I'd like for now, I will likely go with this as it makes much more sense to me.

 

The reason I had set the position to fixed is because I wanted .purple to slide out from the left of the screen at full screen height, on a start: top center trigger. I'm curious how else this might be possible.

 

@GreenSock, with your example, if I wanted exactly the same animation and trigger, without position: fixed, how would I make it so that the purple section filled the entire screen instead of being pushed up how it is? Everything else about it is perfect, it's just that top value offset from triggering at center instead of at top.

 

Thanks in advance for all the help already :)

 

 

 

Link to comment
Share on other sites

20 minutes ago, livlove said:

@GreenSock, with your example, if I wanted exactly the same animation and trigger, without position: fixed, how would I make it so that the purple section filled the entire screen instead of being pushed up how it is? Everything else about it is perfect, it's just that top value offset from triggering at center instead of at top.

 

Oh, that's even easier. If you're using position: fixed, you don't even need to do any pinning at all: 

See the Pen jOQEjyL?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Is that what you want? 

  • Thanks 1
Link to comment
Share on other sites

Hahaha omg I'm so excited! Yeh this is great - but then without a pin how would the user continue scrolling through the rest of the sections below once the animation (from -100% to 0) is finished? 

Link to comment
Share on other sites

12 minutes ago, livlove said:

Hahaha omg I'm so excited! Yeh this is great - but then without a pin how would the user continue scrolling through the rest of the sections below once the animation (from -100% to 0) is finished? 

I'm so confused - that's what the previous version did, right? But you said you did NOT want the purple div to scroll up when the animation finished. Or did I misunderstand? 

Link to comment
Share on other sites

The most recent version you sent over brings in .purple, full height, over the 'whoosh' section - but doesn't slot into place afterwards, since .purple is fixed.

The previous version you sent, .purple wasn't full height, but did slot into place afterwards.

 

The most recent one you've sent solves all the previous issues I had (like incorrect alignment of .purple, .purple scrolling on only the x axis), however, it looks like after sliding all the way out, it would stay fixed, and therefore would cover the rest of the page. Is that correct? If so, how would this be solved? This is why I was trying to use pin previously.

 

This video at 0:49 - 0:51 is the kind of animation I'm trying to create: 

 

 

Thank you!

Link to comment
Share on other sites

  • Solution

Here is an example. Where .purple is absolutely positioned relative to the .animation-wrap and the trigger is moved to the top of the window instead of the center, I've moved the "Whoosh" text to the center of the .red block, so the text is still in the center when the animation starts, but the trigger has been moved to the top of the page, this will result in the .purple start from he top and "slot in to place" afterwards. It kinda was doing the same in the previous examples, but because the start was in the center the alignment would be off by that amount. 

 

I have the feeling that you are going to add more animations to this, so I wanted to share some tips: The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and will save a lot of headache when debugging. Hope it helps and don't hesitate to post back here when you're stuck! 

 

See the Pen VwVLLQE?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Hey guys!

 

Thanks a bunch.

 

I was able to work with the code and get exactly what I needed. Since I wanted the trigger a bit later, I've added a delay to it, and it seems to trigger at the center of the block now, whilst the .purple still appearing at the top of the screen. Beautiful library.

 

Here's my final piece!

See the Pen MWzwaqB by Parvez-Noor (@Parvez-Noor) on CodePen

Just need to get it into the real site now. 

 

Thanks for all your help @mvaneijgen and @GreenSock.

  • Like 2
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...