Jump to content
Search Community

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

edmundsecho test
Moderator Tag

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

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 :)).

 

Summary

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

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...