Jump to content

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

How align the size of the elements included in the scrollTrigger animations when the end is specified as: +=SomeDistance

Go to solution Solved by edmundsecho,

Recommended Posts

This is an extended scenario described in this recent post:


Extended scenario

Say you have content you want the user to scroll "normally" following the animation in this post.  So, once the scrollTrigger content "comes and goes" during the active period of the scrollTrigger, you have more content.  Said differently, the elements included in the scrollTrigger animation serve to introduce the "normal" content.


It may be documented elsewhere, but in my experience extending the scrollTrigger by +=SomeAmount does not seem to work if I don't somehow adjust the size of the "scrollTrigger elements" in such a way that they consume the extra distance.  


The question

Is there a best practice for how to align the size of the "scrollTrigger elements" with the scrollTrigger.end += SomeAmount?


Partial answer

Setting the pin attribute of the scrollTrigger will have greenSock add a wrapping <div class="pin-spacer pin-spacer-intro-scene"> with a style setting padding: 0px 0px SomeAmoutpx, the scrollTrigger duration (where time ~ distance).  The answer is only partial because my current animation has empty space the user needs to scroll through before hitting the elements outside of the wrapped content.

Link to comment
Share on other sites

  • Solution


One of elements had a height that was 200vh.  Prior to my using this amazing library, it made sense to work the effects I was after.  So, to ensure the scroll duration aligns with the elements in the intro, make sure the heights don't include extra space if that's not intended (obvious :)).



Conceptually, to align the end +=SomeDistance with the intro elements, greensock does that for you "auto-magically":

  • setting the height to the sum of the elements in the intro
  • setting bottom padding value to the +=SomeAmountpx


... the computed height value depends on the height of each element.

Link to comment
Share on other sites

Hi @edmundsecho. I wasn't entirely sure what you were asking here, but it sounds like you figured out the answer already - is that correct? Is there anything else you needed? 

Link to comment
Share on other sites

I have what I need.  Thank you.

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.