please excuse any errors in grammar or spelling, as I´m not a native speaker and typing on a german keyboard.
I´m builing/designing a website for a startup in which I participate. We have a budgeting app as one of our “products”. While browsing for some templates I came across the “PurePulse” template. And I love their mockup animation. We use the template “Speedy” and it works just fine for our causes but I really want to include a mockup animation like the one from “PurePulse” on our website.
As a beginner regarding webflow and designing websites, I have to admit I can not build one on my own.
Is there anyone who can help and guide my through this process?
So to achieve this, first thing you have to get the layout right.
Best way to get idea would be to check that website using developer tools (inspect elements) find the sliding-mockups-frame block and see how they have implemented.
To explain the layout idea, you should have a DIV (sliding-mockups-frame) block where your phone image will be kept and beside that there is another DIV (mockup-screen) which will have those mockup images that slides/appears inside the phone.
sliding-mockups-frame block should have position relative and mockup-screen block should have position: absolute
Please go through this and let me know if you understand this, or if you already know these things, let me know what specific things you want know about.
Hello designer friends,
after some work I finally got the basic layout for the animation and added the first interactions.
While doing so I came across the first problem, see read-only link;
If I scroll, the whole website is scrolled. The pictures in the mockup phone are scrolled but I can not see that as the whole website is scrolled. Also the progress bar isnt scrolled.
