Jump to content

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

Pinning the Scroll Trigger based Circular Nav in the Center

Go to solution Solved by akapowl,

Recommended Posts

Hey Champs of the GSAP community,


I have been working on this Circular Nav for a while and finally got it to spin like a pin wheel on scroll using Scroll Trigger but now it won't stay in the middle. It keeps moving up and down when you scroll.


Can anyone help me fixing it to the middle or is there a better way to do this


PS. the tiny man walks on scroll.


Please and Thank you


Edit 1: 
The Circular nav would be on the left Div while there would some content on the right Div

See the Pen OJWjrWo by naushadap (@naushadap) on CodePen

Link to comment
Share on other sites

Hi there! ☺️

You have transform set both on the scroller itself and on an ancestor element which is breaking the behaviour of position: fixed while the element is pinned.

I removed this and it seemed to solve the problem.

.subpage-stickman .circular-nav-outer {

Another little tip - You're using a lot of different scrollTriggers for different screen sizes - you could probably simplify this by using percentages instead of pixels for start and end positions.

Hope this helps!

  • Like 3
Link to comment
Share on other sites

  • Solution


Hey @NaushadAxe


When it comes to (scrollbased) animations, correct markup / layout is key, so you really want to pay attention to that.


I think the problem boils down to how you have things set up, e.g. having scroll enabled for both, the element you use as a scroller and the container around that - and in combination with the layout-styling (flex) applied to them.


In this following pen I boiled down your ScrollTrigger code to just the bare minimum to give you an idea how to tackle this in combination with the changes I made to your CSS ( marked with // *** // ).


The most relevant change is that I added a .pin-wrap that now wraps your visuals on the left side and that ( instead of the scroller element itself ) is being used to position them properly (in the center of things) and is also being used for the pinning of those visuals with ScrollTrigger.


See the Pen 5ab92f752f20dd3bb283125db3d8e52d by akapowl (@akapowl) on CodePen



On a different note:

You've got quite a lot going on in that demo. For the next time it would be great to reduce your demo to the minimum code neccessary to work with because it can get really tough diagnosing what's probably wrong when there is so much going on that is not related to the problem.


Anyways, I know it's quite a bit to take in, but give it a look and see if this helps a bit.


  • Like 3
  • Thanks 1
Link to comment
Share on other sites


Hope to see you more around here. Let us know how you get on. 🙂

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