Hi guys!
I would love some help with 2 design elements on my website.
First - The hero section on the home page has a dart hitting a bullseye animation. I tried setting it up the following ways:
- a Gif - but it was blank when on the site (??? Don’t know why… thought this would be the best option)
- A series of images in a slider - in each image (full screen), the dart moves a bit closer to the bullseye - the “animation” for this was simply the slider moving through the series of images. I didn’t end up going with this choice because you can’t adjust slider time individually - it has to be the same for every image. And I have a few images after the animation with different headings, so those flashed only briefly, while the dart falling took a much longer time (I suppose I could have those last images repeated several times so the timing is longer, but anyway, I opted for method 3…)
- A dart png (transparent background) that I animated to fall and hit the bullseye using webflow interactions. This is what I went with. Of course, it hits the bullseye perfectly on the screen I built it on, but any screen size variation wreaks havoc on this. I know I can change the animation for mobile (which I haven’t done yet), but given that there are so many phone sizes, etc., and this animation has to be so exact (hitting the bullseye as opposed to not hitting it or flowing past it), I don’t think this is the best option.
Thoughts? Could really use the help!
Second - the contact us page has a form that I built in a slider, so it asks you different questions as you click through. It looks great on preview, but in the webflow.io site, it’s all messed up. Can someone see what I did wrong?
Thank you so much for your help!
Here is my public share link: https://preview.webflow.com/preview/compass-life-science-new?preview=7bd8649a9ef33e0ee59fcdd75efe9314