Jump to content
Search Community

ScrollTrigger scroll to hash and pin

Julien G test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

Hello, i'm trying to make a hash link to work with ScrollTrigger and the pin functionality with no success...

When the trigger is reached, an element containing the whole page is pinned, to stop everything during the animation.

 

It seems that the link is pointing to the original location of the element (before ScrollTrigger resize the pinned element).

I tried to locate the position of the element in the dom with element.getBoundingClientRect() to perform a scroll with window.scrollTo() but same issue, it returns the original location.

 

How can I scroll to an element that is contained inside a pinned element?

Maybe I'm pinning the wrong element?

 

See the Pen BaYyvbK by juliengmd (@juliengmd) on CodePen

Link to comment
Share on other sites

Thank you for your answer. It is working now with this function inspired by getScrollPosition from helper functions :
 

function getScrollPosition(id: string) {
  const st = ScrollTrigger.create({ trigger: `#${id}`, pinnedContainer: '#pin', start: 'top top' })
  const stStart = st.start
  st.kill()
  return stStart;
}
  • 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...