I’ve asked this question before and not unfortunately the question got over looked and never answered among my other questions. A few other people replied to my question so I figure others are facing a similar issue.
I’m currently wondering if there is more visually appealing and neat way I could be reusing the interactions in my project.
WHAT I’M TRYING TO ACHIEVE
Whenever you hover over a city name on the left, it will display an image on the right hand side for this city. Please look at my public link for an example “New York” “Tokyo” and “Sydney” all work how I would like.
However, for each different city name a user hovers over, I need to create a new timed animation for each city. I feel like this is not needed and I could put them all under one timed animation with different triggers inside. I haven’t been able to figure out how to do that just yet. So any assistance is highly welcomed.
Hello, this is clearly something that should be easier, because it’s pretty dull for a human to understand. However, we’re dealing with a machine and it only does what we tell it to.
I do believe that this could be done easily with JavaScript, but as I’m still learning it, I can’t provide you with precise directions to address this problem. However, I recommend you trying to re-structure everything creating separate divs to each group of city name + picture. That way, you can make the interaction trigger apply to the DIV class, and the animation will affect the children of the interaction trigger. I know it sounds a lot, but it’s doable.
Thank you so much for taking the time to not only show how to do this, but also record and upload a video for it. Was a little hard to follow along with due to the music and would be good to hear what you were saying. Still extremely helpful regardless.
It was my first time recording something to help someone. I didn’t know how things would come out. I’m sorry for the quality, but I really hope it helped.
