How to create this button animation?

Hi everyone,

I am having some trouble recreating a button and it’s animation as seen on the UN’s website highlighting the War in Syria. Once the UN’s page loads and it finishes showing some intro text, the page will display a background image and the text “What was Syria like before the war?”. At the bottom of this page there is a circle button and an arrow that animates down and then comes back in from the top. It is that animation that I wanted to recreate.

I am fine with linking the button to move to a section on a page but at the moment the button I have created just has the letter ‘V’ in it instead of an image of an arrow.

Link below for the stage that I at right now :slight_smile:

Any help is much appreciated!


Here is my site Read-Only: https://preview.webflow.com/preview/ezras-first-project-0f0334?utm_source=ezras-first-project-0f0334&preview=15d7cb38fedd93ea54163605f38d15ec

This topic can help you:

Hi Aaron,

Thanks for your response, unfortunately your link doesn’t seem to work for me. Comes up with Webflows ‘Page does not exist’ quote, “This is not the page you were looking for”.

Ah my bad, working now. The example site link was broken but followed the original post for a video example on how to make that. Will try that now and let you know how I get on :smile:

1 Like