Ibadullah

Do you mean by any specific easing or I should try different ease options? And what about mobile responsiveness?

Hi Zach, Thank You for your guidance. I am able to achieve what I was trying for, I have updated my codepen, so please have a look one final time if you can. Everything looks similar apart the smoothness. Can you recommend anything which can help me to achieve that? any Ease or duration setting that can look better. Also regarding the responsiveness issue, I have converted my units into percentage %, all my units are in % but still it's not looking good on mobile devices. Any tips would be appreciated. Thank You.

Hi Zach, Thank you so much for coming out with the solutions. I have managed to fix the things which I mentioned earlier. I have updated my CodePen, please review the new code. There are still few things that I am struggling with: 1. When I click on the next button I want to show the preview of the 2nd page on the current page and then zoom in to cover the full page when it's load. 2. Currently, I am using the fake animation duration to load the content, how can I triggered the onComplete function on real time? 3. Last, everything looks good, on full-screen browser, however when I shrink the browser size, the elements are overlapping, is there any fix for it? Thank You

Hi @ZachSaucier, Thank you so much for your reply. You are right I don't have much grasp on GSAP animation, thank you for your feedback. I will read those documents and try again. I have managed to sort out the fading part using timeline as you suggested but there is still one issue, when I click on the next button the animation doesn't reset itself, it contains the translateX property and it doesn't work properly. I have updated my code, you can check the Codepen again please. Thank You

Hi friends, I am trying to make a similar animation like them: https://experience.soletanche-bachy.com/en/second-world-war-museum-poland The animation appears with a red bar at the top of the page that gets pushed out with a blue bar and finally loads with a new page. However, when I try to animate, the red-bar stays in a fixed position and the blue bar overlaps it and gets stuck. How do I fix this? My other problem is that when I click on the previous button how will the reverse functionality work?. Any help would be highly appreciated. Thank you