ScrollTrigger + Observe to create snap scroll - However have one section that will pause the observer trigger and scroll within...

[fdev]

Is there an easy way to pause the observer function that I have running here so that in section 3 i cam use a scrolltrigger for an animation and once that animation is finished the observer snap scroll animations can begin again?

 

Thanks

See the Pen RwvKmzv by fayskerritt (@fayskerritt) on CodePen

[GreenSock]

I don't really understand what you're trying to do, but you can certainly disable() or enable() an Observer whenever you want. It seems super strange to me, though, that you'd be mixing Observer-based scroll interactions with ScrollTrigger ones. As a user, it's quite confusing. Like...does my scrollbar work or not? I see it...and I try to scroll and the way you set things up would make the scrollbar work sometimes and not other times. To me as a user, that'd make the site feel broken, but that's just my personal opinion. 

[fdev]

Hey Jack,

 

I understand what you mean, maybe using scrollTrigger isnt the best option.

 

What I am trying to do is when the user lands on section 3, when they scroll (or at least swipe on the touchpad/mouse) it would trigger an animation that pins the whole section but changes the content, it would need to be pinned as i want there to be a full page animation that will look like you are scrolling with pinned side sections.

 

An example I found on the web is this site here where you can see relies on the user to scroll to change the sections. I just can't figure out how to add these animations into the large observe function I already have.

 

Thanks again for your advice its much appreciated!

[GreenSock]

Did you intend to include the example you found on the web? We really need to see a minimal demo that clearly illustrates the problem. 

 

I read your description a few times and I'm still a bit lost (possibly because it's 3:20am an I'm sleep-deprived) but it sounds like you'd need to wire up some custom logic to sense when the user is on panel 3 and then in that case, let the Observer's onChangeY events drive the animations you want to fire off. And the amount would be based on the Observer's deltaY. This definitely sounds like custom logic stuff that's well beyond the scope of help we can provide in these free forums. You're welcome to reach out to us about paid consulting services if you'd like to explore it further. Almost anything is possible with the tools...it just might take some custom logic to wire it together. 

[Rodrigo]

Hi,

 

As Jack mention you can enable and disable your Observer instances at any point. Maybe what you're trying to do could require two different Observer instances like this demo:

See the Pen zYyLdrB by GreenSock (@GreenSock) on CodePen

 

Also perhaps using just ScrollTrigger could be an option, look at the approach of this demo to jump between sections without using Observer:

See the Pen YzQOxxO by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[fdev]

Sorry about that - forgot to include the link - https://drippop.com/

 

Thank you for replying such late at night!

 

Ah ok thanks for explaining, I would love to try and write some custom logic myself but I just struggle to know where to actually insert the custom logic into the code. Would it be its own function or would it be within the observe function?

 

 

[Rodrigo]

18 minutes ago, fdev said:

I would love to try and write some custom logic myself but I just struggle to know where to actually insert the custom logic into the code. Would it be its own function or would it be within the observe function?

What particular custom logic?

 

If you want something to happen as you scroll between the sections that run with the Observer Plugin, then you'd have to use ScrollTrigger for that, paying attention to the start/end points and the order in which every section shows/animates on the screen.

 

For what I can gather, what you're trying to do is not the simplest thing to achieve, not extremely complicated, but definitely you could need to spend a few hours crafting the custom logic to accommodate. Unfortunately we don't have the time resources to create complex and custom solutions for our users in these free forums. You can contact us for paid consulting or you can post in the Jobs & Freelancing forums to get help there.

 

Happy Tweening!