scroll trigger Pinning the Scroll Trigger based Circular Nav in the Center

[NaushadAxe]

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

[Cassie]

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 {
    transform:scale(0.75);
}

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!

[akapowl]

 

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.

 

[NaushadAxe]

Thank you sooo Much for helping me Solve this

@Cassie and @akapowl

[Cassie]

Pleasure! 

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