Streaming live at 10am (PST)

Recreate a Contact Page for my Client

Hello World,

I’m not a developer just a marketing guy who builds small sites for clients. I usually use wordpress and stick to a theme. However I have a client wanting me to try to recreate an animated staff photo gallery that they saw on this website Who we are? - Forge Creative - Creative Agency based in Auckland. The heads all move and look at whomever you mouse hover on and it all still works when it responds. I’m a little out of my depth and before I spend to much time on it I’m hoping someone can tell me if this is even possible in Webflow. And does it need custom coding or can I create a similar effect with the drag and drop editor. I can make gifs for the animation but how would I layer them and trigger the different gifs on mouse hover?
Thanks


hi @Steve_Olsen and welcome. I had deep dive into example site and all these animations are done with CSS/JS and png sprites. This mean lots of custom code. As Webflow allow to embed custom code I presume that it will be possible to create this in WF but it can be challenging.

So first you have to know how to create sprites (PNG) and then look on their main CSS. What they do is move spite by 9 steps forward and as each team member have several sprites and each sprite is made from 9 images. These are changed ( 1 specific sprite of 9 possible to move forward by 9 steps) on item hover. You can get an idea about sprites when you look into sources/images from devTools

I do not know if this CSS code is generated by some WP plugin but I presume that is pure custom code.

Good luck :wink: