Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
DaemonHK

How to create menu with pin?

Recommended Posts

Hello and sorry for my English...

 

On my pen I was try to create menu with content section with pin module. But something wrong happening (don't seen on example(() - when I click on link "Section 3", page scrolled to Section 4 Content and stoping.

 

So, can anybody help me with full GSAP example (or help update my example with some jq) with fixed/sticky menu, when page scrolled to needed section, with pin blocks into content section and activated menu link when pin is visible?

 

P.S. If needed, I can update my example for more code and details.

See the Pen XWKKeWb by daemonhk (@daemonhk) on CodePen

Link to comment
Share on other sites

THX @mikel, but my main problem is - gsap.to(window, {scrollTo: e.target.getAttribute("href")});

When I click by link, wasn't happening anything or code get false ID, but ID from link and section are same.

Link to comment
Share on other sites

4 hours ago, DaemonHK said:

my main problem is - gsap.to(window, {scrollTo: e.target.getAttribute("href")});

When I click by link, wasn't happening anything or code get false ID, but ID from link and section are same.

Hey DaemonHK. I don't understand your issue. What's wrong in the demo that you posted? Can you please try rephrasing?

Link to comment
Share on other sites

  • 3 weeks later...

Hi, ZachSaucier! Everything is OK now, but I have new problem(( When scrolling to end off pins then opens next static block is very fast, without any animation.

 

I renew my Pen - 

See the Pen XWKKeWb by daemonhk (@daemonhk) on CodePen

 for show it.

Link to comment
Share on other sites

You've got a lot of stuff going on there.

 

We don't recommend using your own scroll function like that to constantly check the scroll position of things because the performance is very bad. We recommend setting up ScrollTriggers for that sort of thing as they will perform much better.

 

Additionally we recommend GSAP's ScrollToPlugin over using jQuery's animations for your anchor clicks.

 

It's also unclear to me what you're wanting the ScrollTriggers do that you do have.

Link to comment
Share on other sites

I need: scrolling with pin animation, adding active class to current menu point, click to menu and scrolling to needed block, normal animation to static block after pin blocks)) I have a problem with GSAP clicking to menu - nothing is happening or document scroll to another block, but I'm still working with it...

Link to comment
Share on other sites

There's a couple of threads that change the "active" state of navigation on scroll - is that what you're looking for?

 

  • Like 1
Link to comment
Share on other sites

This too, but main question is fast change to static block after GSAP blocks (I don't need it). You can view it on my pen.

Link to comment
Share on other sites

That's not caused by GSAP/ScrollTrigger. That's caused by your custom scroll related code that I recommended you not use. You can test by getting rid of everything after line 14.

 

How about you follow my recommendations from the posts above to try and get it working the way you need it to work and then post back here if you're still having trouble?

Link to comment
Share on other sites

  • 2 weeks later...

I'm sorry for long answer... I have renew my

See the Pen XWKKeWb by daemonhk (@daemonhk) on CodePen

(jQuery only for adding class to fixed menu).

 

1. Now all clicks execute by GSAP and it doesn't work by clicking on fixed menu (I need to scroll to block when click on its menu point).

2. MAIN question is - when I scroll to the end of GSAP's blocks to last static block - is there no animation, jast jumping from block to block. How I can do smooth change from GSAP blocks to static block and backward?

Link to comment
Share on other sites

  • 6 months later...
On 10/19/2020 at 8:43 AM, mikel said:

Hi @mikel

I have a quick question for you. I have the functionality that woks exactly like your demo below.

I need to add a class Active to each button instead of the background color. 
Whats the best approach? I know className: '-=' className: '+=' are not longer supported? 

 

 

 

Happy tweening ...

Mikel

 

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.

×