tabish amiri

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

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.

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

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 https://codepen.io/tabish-amiri/pen/wvxNLPP 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...

is anyone here to help me figure out

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!

so how can I restart the animation in a click event so I am using function that the timeline object is created inside that and I call the function when the element is clicked, so should I call the restart inside the function?

so how can I restart the animation in a click event so I am using function that the timeline object is created inside that and I call the function when the element is clicked, so should I call the restart inside the function?

hi there ! I am very new in gsap animations so I am really happy to be here and I am really enjoying it but I have faced a problem in my code and I hope that someone helps me solve it ... I want to add some animations to my sections so when the navbar links are clicked so their corresponding section should come with an animation and it acts as expected but when I click that links again it shows nothing it seems that the pages have been in their animation final state that I dont want that , I want that they be acting the same animation any time the links are clicked

//this is for animating the pages that are related to navigation bar so the parameters are a for active page and d for deactive page function btt(a,d){ let tl = gsap.timeline({defaults:{duration:0.6}}); tl.fromTo(a, { transformPerspective: 1000, transformStyle: "preserve-3d", transformOrigin: "top ", rotationX: -90, }, { transformPerspective: 1000, transformStyle: "preserve-3d", transformOrigin: "top ", rotationX:0, } ) .fromTo(d,{ opacity:1, display:"block", transformPerspective: 1000, transformStyle: "preserve-3d", transformOrigin: "bottom ", rotationX:0, }, { zIndex:-1, opacity:0.8, display:"none", transformPerspective: 1000, transformStyle: "preserve-3d", transformOrigin: "bottom", rotationX:90, },0); }