Jump to content


ScrollTrigger: Pin offset

Moderator Tag
Go to solution Solved by akapowl,

Recommended Posts

Hi all,


Thanks for the great work on the ScrollTrigger plugin. Its a joy to use! I was wondering if its possible to have a custom offset for the pin functionality? I am animating a video based on the ScrollTrigger progress. Additionally, I want the video element to be pinned at the top. This works just great using pin: true


Now I ran into a small issue:  I want to start the animation when the element comes into view, but only have it pinned once it reaches the top of the viewport. Setting the start position to start: "top 50%" makes the animation play when the trigger is entering the viewport, but it also sticks the element to its current position. What I would need is a "pinOffset" or a "pinPosition".


A very ugly workaround that kinda works:



  trigger: parentSection,

  pin: false,

  start: () => "top 50%",

  end: () => "200% bottom",

  onEnter: (self) => {


    ScrollTrigger.create({ trigger: parentSection, pin: true });


  onUpdate: ({ progress }) => {





Link to comment
Share on other sites

  • Solution

Hey @r0skar - welcome to the forums


One thing you could do, is set up two individual ScrollTriggers, one that handles only the pinning when the top hits the top of the screen, and one that fires the video playback when the top of the video hits the bottom of the screen.




  • Like 2
Link to comment
Share on other sites

Thanks for the suggestion and warm welcome Paul.


Basically, this means I would stick with my current workaround, but instead of creating the second ScrollTrigger in the onEnter callback, I would just create it outside of the first ScrollTrigger's scope, right? Yeah, that makes much more sense than doing it in the callback - I dont know why, but I was under the assumption, that we cant have multiple ScrollTriggers for the same element, so I didnt even try it...


P.S. Just tried it and it works great 👍

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