Building a mockup animation as a beginner

Hello fellow designers,

please ignore any mistakes in grammar or spelling, as I´m not a native speaker and typing on a German keyboard.

I´m designing a website for a small startup I participate in. We offer a budgeting app and I want to present it´s features on a special section on the website. I´d like to build a mockup animation, where users/visitors can “scroll” a mockup iphone with the features of the app.

We use the template “Speedy” and it works just fine for our needs. I recently came across the “PursePulse” template. I really like their mockup animation. But I have to admit I do not know how to build one myself, as I´m new to designing websites.

Would anyone be able to guide and/or help me with that?

Thank you in advance!

hi @Lukas_Restle and welcome. You can open template in designer to study how it is done. You can recognise what elements have animation assigned as these have “lightning” icon next to element name. In their template it is eg.element with class “steps wrapper”

You can visit Webflow University and finish all their courses to be comfortable how to work with this platform.

Start with “Webflow 101” there is also “Animations and interactions” course.

You can learn from your template and recreate animation easily but much better will be understand how things works ( not only animations ) and for that you should understand CSS. Once you will be comfortable with CSS you can create websites in WF with ease as WF is only UI.

Good luck on your journey