ScrollTrigger: Pin offset

[r0skar]

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:

 

ScrollTrigger.create({

  trigger: parentSection,

  pin: false,

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

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

  onEnter: (self) => {

    self.refresh(true);

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

  },

  onUpdate: ({ progress }) => {

    playAnimation(progress);

  }

});

 

[akapowl]

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.

 

Cheers

Paul

[r0skar]

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 👍

[akapowl]

 

I don't know about your exact setup, but just as an example, what things could look like I made this quick pen

(before I saw, that things already work great on your side  )

 

See the Pen e9442702eb2a92d5be270b7e5587b621 by akapowl (@akapowl) on CodePen