On my portfolio site, I created mouse hover/click states that display a sneak peak of my work by manipulating the opacity of div blocks. Everything is working fine on desktop, but on mobile, if the user clicks on a project (triggering the opacity to rise on the corresponding image to display the project’s sneak peak) to travel to the project page, then returns to the homescreen using the back button, the animation doesn’t reset. The sneak peak image’s opacity remains at 100% and the default image remains at 0%, when the intended functionality is the opposite.
Ideally, the user clicks on the project button and gets a glimpse of the work as the project page loads to provide feedback for the user.
Here is my public share link: itsjosie.com (please look on mobile to best understand what I mean)
Here is the Designer link: https://preview.webflow.com/preview/josieallison?utm_medium=preview_link&utm_source=designer&utm_content=josieallison&preview=076aeb0f98c3575a49bc4ed234d7f551&pageId=60d208ced6076168b90225de&workflow=preview