Jump to content
Search Community

How to trigger inside of a pin using scrolltrigger

JoeH test
Moderator Tag

Recommended Posts

The codepen I have shared is the "Locomotive Scroll with ScrollTrigger scrubbing and pinning" demo from the ScrollTrigger.scrollerProxy() page, but it is the same as my setup essentially.

 

My question is how can I achieve something like this - 

See the Pen 7c9f1aaa4340ace9c4a05102ba89a962 by akapowl (@akapowl) on CodePen

Notice how when the item pins it moves through each of the titles one by one.

 

I have tried this with the Locomotive Scroll setup but it doesn't work, it waits until the pin is ended before triggering. For example:

 

  gsap.timeline({
    scrollTrigger: {
      trigger: ".pinned",
      start: "top -=10%",
      end: "+=100%",
      scrub: true,
      scroller: '.smooth-scroll'
    }
  })
    .to('.sectors-desktop_text_1', {opacity: 1})

This is my attempt to get this to trigger when the pin has been scrolled through by 10%.

 

The pin looks like this:

 

  gsap.timeline({
    scrollTrigger: {
      trigger: ".pinned",
      start: "top top",
      end: "bottom top",
      pin: true,
      scroller: '.smooth-scroll'
    }
  })

As I said, this doesn't trigger until the pin is broken. I've tried to remove the scroller value but this doesn't work, nothing is triggered at all. Do I need to set the scroller as something else in order to get it to trigger 10% (or any %) through the pin?

 

See the Pen 1dc38ca14811bc76e25c4b8c686b653d by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

 

Ooooh yes, good catch! ...now that you pointed that out, I realized there actually is one major mistake in my demo!

 

It only works (although flawed) because that pinning ScrollTrigger is being created after that loop for all the ScrollTriggers in the green section. That obviously is not how you should do it, I appologize (and I will correct those demos - edit: done).

 

The way you actually want to do it is ideally first create that pinning ScrollTrigger (so all other ScrollTriggers will have knowledge about the pin-spacer being applied - if for some reason you can't create it first you can set a refreshPriority to it with a number above 0 respectively above the refreshPriority of the other non-pinning ScrollTriggers).

 

This first ScrollTrigger should have the element you are pinning as the trigger (.pin-up). To be able to calculate the starts of the other ScrollTriggers then, you'd need a wrapper (.wrapper) around that pinning element (.pin-up) that keeps scrolling with the flow and that you can thus use as a basis for those calculations.

 

So here is the demo corrected and with locomotive-scroll included for your convenience :) 

 

Sorry for the misleading again.

Hope this works better for you now.

 

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

 

 

  • Like 1
Link to comment
Share on other sites

You've been more than a great help, I am now using a better smooth scrolling method and it is playing nicely with all my other animations, just not this one (soon to be working). Thanks for updating the demo.

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