Jump to content
Search Community

ScrollTrigger

arl1nd test
Moderator Tag

Recommended Posts

Hi there,

 

Congratulations for your brilliant new plugin ScrollTrigger, this seems to be a life saver for me in lot of situations.

 

I am trying to adapt ScrollTrigger to build a complex sticky header and I am looking for few advices or you can take as suggestions to add as new features in new the upcoming updates:

 

1. Events

Is it possible to add Events just like for GSAP animations with eventCallback method. I am using ScrollTrigger.create so there will be a situation when I want to add an event callback after the initialization. For example:

 

let sample = ScrollTrigger.create( {
  trigger: '.selector',
} );

// Later in code
if ( certainCondition ) {
  sample.eventCallback( 'onToggle', ( self ) => console.log( self.isActive ) );
}

2. In my case I am building a sticky header scene where I simply need to toggle fixed class (without pining) the element, so in this case, I would prefer using only a starting point but a NULL ending point.

 

So my question is, is it possible to have no 'end' position for scroll trigger? Simply I can track when elements enter certain scroll position:

let toggler = ScrollTrigger.create( {
	trigger: '.site-header',
  	onToggle: ( self ) => console.log( self.isActive ),
  	start: 'top top',
  	end: null,
} );

The current version will trigger twice onToggle function.

 

I hope my explanation is clear.

 

Best,

Arlind

Link to comment
Share on other sites

3 minutes ago, arl1nd said:

Is it possible to add Events just like for GSAP animations with eventCallback method.

Yep, check out the .addEventListener() function. (the docs are great for learning more about GSAP features by the way)

 

4 minutes ago, arl1nd said:

is it possible to have no 'end' position for scroll trigger?

Just give it a really large value like 99999. Other alternatives are covered in this thread:

 

  • Like 2
Link to comment
Share on other sites

You cannot add listeners to an individual ScrollTrigger instance. We put a lot of work into optimizing ScrollTrigger since scrolling can be so performance-sensitive. Event dispatching can be expensive. Callbacks are cheaper, and we further optimize things by having you declare your callbacks initially (not add them dynamically later). I have yet to come across a scenario where someone would need to add a handler dynamically. Is there some reason you can't just declare them upon creation? 

  • Like 2
Link to comment
Share on other sites

On 8/6/2020 at 1:08 AM, GreenSock said:

You cannot add listeners to an individual ScrollTrigger instance. We put a lot of work into optimizing ScrollTrigger since scrolling can be so performance-sensitive. Event dispatching can be expensive. Callbacks are cheaper, and we further optimize things by having you declare your callbacks initially (not add them dynamically later). I have yet to come across a scenario where someone would need to add a handler dynamically. Is there some reason you can't just declare them upon creation? 

Totally understandable. 

 

Well, this is the scenario: because I provide my StickyHeader library as global variable already initialized as window.StickyHeader (in a bestselling WordPress theme) which uses ScrollTrigger, and users can access custom functionality such as StickyHeader.switchLogo or StickyHeader.setTransparentHeader so I thought there would be a good way to simply forward JS snippets for my theme customers for examle:

 

StickyHeader.on( 'toggle', function( scrollTrigger ) {
  // Sticky mode
  if ( ! scrollTrigger.isVisible ) {
    this.switchLogo( {
      src: '...',
      width: 100,
      height: 50
    } );
  }
} );

But I'll manage to find a way to fix this.

 

Thank you very much for your help.

Link to comment
Share on other sites

  • 10 months later...

Maybe something like this:
 

// Mark section as loading
let introLoading = true;
gsap.timeline({
    ease: "power2.out",
    scrollTrigger: {
        trigger: '#section-intro',
        pin: '.wrap',
        start: "top top",
        scrub: 0.25,
        snap: false,
        onEnter: self => {
            
            // Mark as loaded after first time enter event is fired
            // Would be same as on init
            if ( introLoading )
            {
                // Mark as init after 1000ms
                setTimeout( () => {
                    introLoading = false;
                }, 1000);
            }
        },
    }
});

 

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