How can I add animation to my website like Rolex's?

Store Design
,
1

Hi all,

I am a trainee web designer just playing around with a website/trying new things and I was wondering how can I ad animations to my website. I have linked a page from Rolex’s website and if you scroll down to the middle of the page where it says “Commitment to excellence” you can see a animated watch rotating. I would like to know/add something like this to my site.

Please could someone guide me in the correct direction to do this? I assume I need to add code although I am unsure what code to use/where to put it? Is there a place to find that specific bit of code? Is there a app I can install? etc. Any help is appreciated.

Thank you all.

p.s I have added a screen recording from Rolex’s website of what I want to do as well.

1 Like
2

In general you need to narrow down the scope to get effective answers for the help your trying to get. It’s way too broad setting up an expectation for others to not only reverse engineer a specific animation from some site into code but then to also further convert for arbitrary use in an undefined shopify theme.

Something like this you should already have some sample code and be asking in terms of a specific theme structure providing a url for others to inspect.

https://community.shopify.com/c/shopify-design/help-us-help-you/td-p/668159

If you have the simple code just put it into a custom-liquid block or section to the relevant page types in the visual theme editor.

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend

Teaching how to do web animations themselves is beyond the scope of forums like this.

If you have no actual code yet build a simple local web page with the animation first or your biting off more than you can chew trying to learn animation and shopify-theme development in one go.

If not sure how to do it locally use an online tool like codepen .

If completely unfamiliar with HTML&CSS animations look online for relevant tutorials first.

After that for customizing themes start here:

https://shopify.dev/docs/themes/getting-started/customize

Good Hunting.

3

Hi @DavidWebDesign1 ,

I assume you know enough coding. You can try animista for free non-complex animation examples.