Jump to content
Search Community

End pin when the bottom of the last item moves

pixelarchitect test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

I have made this pinned element that pins at a certain point and continues scrolling at a certain point but currently it continues to scroll to late, I want it to continue scrolling when the bottom of the last section hits is aligned with the bottom of the pinned section (.pinnedtext4 in this case).

I tried adding the class to the end trigger but it doesn't work. Does anyone have an idea?

ps. If you have a tip or example link how I can change the class of the titles on the left side depending on the lighting up of the text on the right side, please let me know as well! :)

Screenshot 2023-04-06 at 17.52.56.png

See the Pen yLxgRoE by pixelarchitect (@pixelarchitect) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @pixelarchitect you where correct by trying to set the endTrigger to the end of the other element. I always like to turn on markers, so that I can see what is going on. For the logic here we want the trigger to start when it hits 25% of the view port and we want it to end when the bottom of the last element comes by, but we want it to line up with the bottom of the trigger element, so we know it starts at 25%, but that is the top of the element, so we need to figure out how high the element is. Because you're using bootstrap I had to add an inner div to enclose just the elements we need to get the height, then we add the starting 25%+={the height of the element} and we're done. Hope it helps and happy tweening! En veel geluk met het project!

 

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

 

For the auto highlighting of text (and even scrollTo functionality) check out this demo. For even more awesome demo's check out https://greensock.com/st-demos/

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

  • Like 1
  • Thanks 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...