After spending considerable time learning how to code, I find myself seeking assistance in creating a specific animation. For the past two days, I've been struggling to bring my vision to life (see attached image). Unfortunately, my current knowledge falls short when it comes to constructing this complex animation on my own. While exploring CSS for solutions, I realized that blending text revelation with moving elements presents a challenge, and my grasp of JavaScript frameworks is limited.
The animation sequence commences with the image on the right (initial state), transitions across to the left image, ultimately revealing only the orange background and accompanying text. View animation details
Specifically, I am facing difficulty achieving a gradual unveiling of text using the orange shape as a medium (the significance of the two bars must be preserved even if it complicates the process).
I am uncertain about what keywords to search for on Google in order to unearth a solution, and I am unsure whether CSS, JS or a framework would best serve my needs.
While I am not expecting complete pre-written code, I do seek guidance or suggestions to point me in the right direction.
Appreciation in advance for any insights you may provide.