overridden css styles after 3d animations

[tabish amiri]

hi ... 

I am just wondering that is gsap 3d animations removing some styles of the inner content of page or section that has been animated?

I have animated my pages with gsap in 3d , and inside the pages there are some small sections that have background image with fixed position so but after that I have added those 3d animations , those sections no longer have the fixed positions.

I double checked my css styles and they are the same as they were before but I really dont know what happened!

 

[tabish amiri]

is anyone here to help me figure out 

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[tabish amiri]

the project is very complicated unfortunately and it is hard to grab the whole things that may couse this issue but my gsap animation code that I use is here and my css styles worked properly before I animated the pages 

the gsap animation code is here  

See the Pen wvxNLPP by tabish-amiri (@tabish-amiri) on CodePen

I have some navlinks that everytime user clicks them they are responsible to bring the corresponding content with an animation .

I have 3 timelines which animate the active (the just clicked link for a page) and deactive (the previous clicked link for the previous page) and another for the first click page. they are all the same like this one but just the rotateX property changes between them.

now the animation acts as perfect as I wanted to , but unfortunately it couses some other problems for me so now the content inside the pages that are animated have lost some css functionalities like some background images which were fixed in background attachment  previously now they are not and also some other fixed positioned elements are not fixed now.

I will be happy that anyone helps me  figure out this issue...   

[GreenSock]

GSAP does not remove inline styles like that, no. It's very difficult to diagnose by just looking at a small chunk of JS, but my guess is that this actually has nothing to do with GSAP at all. It sounds to me like you are running into the standard CSS behavior related to position: fixed elements that are INSIDE a container element that has any transform applied to it. The CSS spec dictates that it creates a new stacking context, thus the position: fixed elements inside an element with a transform will then use that container as the reference point for its fixed position rather than being fixed to the viewport. 

 

Here's a demo: 

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

 

Notice the container has a transform: translate(0px, 0px). Scroll the page and notice that even though the target element has position: fixed, it scrolls with the container! Now REMOVE that transform in the CSS and watch what happens when you scroll; it remains fixed in the viewport. 

 

I bet that's your issue. 

[tabish amiri]

let me check I hope this is my issue so it really annoys me

[tabish amiri]

in this case you are right so my fixed content , not only them but all of the contents are inside the animating page so I am animating the whole page with 100% of screens width and 100% of the height so it is clear that they are inside .

but what do you recommend?

I have a home , contact , about , portfolio , blog  and resume sections that are the actual animating elements so how can I positions my fixed elements though?

even if I make them absolute so they will still be absolute to their parent which is the section itself. 

[GreenSock]

Sorry, we really can't offer much help when you don't provide a minimal demo. You're asking us to suggest CSS and HTML structure changes but we have no idea what they are now or what the context looks like. It sounds to me like you're either have to change your HTML structure so that your position: fixed elements are outside of the containers that have transforms applied OR you'll need to apply counter-transforms to simulate position: fixed. For example, if the container moves up 100px, you move the child elements down 100px to compensate. 

 

Please also keep in mind that these forums are for GSAP-specific questions (see the forum guidelines). 

[tabish amiri]

ok thank you , you are right it is very complicated...