Webflow Update of nicholasmarriott.au
Budget: $250 – $750 AUD
What I want
I want my current website https://nicholasmarriott.au/ recreated in Webflow, using Webflow's built-in elements
Created two(2) web pages
Homepage
Another page - call it “page_2” for now
This will be an exact copy of the homepage, needs to be nothing more than a simple “homepage” cloning exercise
The only change will be the inpage navigation - I want the “Homepage” & the “page_2” navigation to be separate elements for internally navigating the page
Hide this page from search engines
What to Keep
Intro animations
Everything in the <div id="logo-area"> can stay as is
Use the Webflow “Code element”
Add the code for these elements in to the CMSs “Head code” & “Footer code”
Refer ro the “Resources(s)” section (below) for the code
View source to located any image files required
Floating Gallery animations
Everything in the <section id="floating-gallery"> can stay as is
Use the Webflow “Code element”
Add the code for these elements in to the CMSs “Head code” & “Footer code”
Refer ro the “Resources(s)” section (below) for the code
View source to located any image files required
What to Update
Navigation
Migrate the current navigation in to the Webflow “Navbar”
For the homepage keep the internal navigation as
Home
Jumps to the top of the first paragraph
Credentials
Jumps to the “Credentials ”section
Contact
Jumps to the “Contact” section
For “page_2” create internal navigation links as follows
Top
Jumps to the top of the first paragraph
Middle
Jumps to a “Middle ”section
Bottom
Jumps to a “Bottom” section
I want to replicate the switching function between <div class="main-menu-wrapper"> & <nav class="mobile-nav">. Triggered by Webflows built-in Tablet/ Mobile breakpoints.
Keyword animations
The animations below need to be replicated using webflow built in elements & GSAP Animation Interactions
I want all of the animation features replicated
MovementI(s)
Opacity changes
Overlapping
Pinning
These are the nine (9) images to animate
Research Image
Animation Sequence
Refer to the files in the “Resources(s) section below
Image Source
https://cdn.prod.website-files.com/682bea8aa26f3f5caeaf149c/682d663f2ca24a87907e68c9_research.png
Inspire Image
Animation Sequence
Refer to the files in the “Resources(s) section below
Image Source
https://cdn.prod.website-files.com/682bea8aa26f3f5caeaf149c/682d663fcdbf9407e12663c1_inspire.png
Design Image
Animation Sequence
Refer to the files in the “Resources(s) section below
Image Source
https://cdn.prod.website-files.com/682bea8aa26f3f5caeaf149c/682d663f5036449bbf75d50d_design.png
Concept Image
Animation Sequence
Refer to the files in the “Resources(s) section below
Image Source
https://cdn.prod.website-files.com/682bea8aa26f3f5caeaf149c/682d663fa8d302b156c5aa20_concept.png
Resonate Image
Animation Sequence
Refer to the files in the “Resources(s) section below
Image Source
https://cdn.prod.website-files.com/682bea8aa26f3f5caeaf149c/68353da5214821d7329e97e3_resonate.png
Build Image
Animation Sequence
Refer to the files in the “Resources(s) section below
Image Source
https://cdn.prod.website-files.com/682bea8aa26f3f5caeaf149c/682d663fc8a696cd19dc385e_build.png
Sensory Image
Animation Sequence
Refer to the files in the “Resources(s) section below
Image Source
https://cdn.prod.website-files.com/682bea8aa26f3f5caeaf149c/683549590e5368e1509dbc6d_sensory.png
Fusion Image
Animation Sequence
Refer to the files in the “Resources(s) section below
Image Source
https://cdn.prod.website-files.com/682bea8aa26f3f5caeaf149c/68645bf15232725113fe7a48_transform_t.png
Transform Image
Animation Sequence
Refer to the files in the “Resources(s) section below
Image Source
https://cdn.prod.website-files.com/682bea8aa26f3f5caeaf149c/68645bf099f0e7efec51499c_fusion_t.png
Resources(s)
HTML
“View Source” on the current homepage
CSS
<link rel="stylesheet" href="style.css">
GSAP/JS
Extract the code from either of the twi files below
This is the origional GSAP code
<script src="js.js" defer></script>
This version of the GSAP code was updated using ChatGPT
<script src="architectural-acoustics.cleaned.js" defer></script>
Fonts
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
Misc
You need to have a Webflow developer's account, we will grant you access via the team members admin feature
You need to be able to recreate the “Keyword animations” (above) using the Webflow GSAP animation feature
This includes the pinning code
Keep the “Animated intro” & “Floating Gallery” as separate HTML & CSS components
Add the code for these elements in to the CMSs “Head code” & “Footer code”
Use the Webflow inbuilt breakpoints for Tablet & Mobile
Provde all quotes in Australian $ - not - US $
I want my current website https://nicholasmarriott.au/ recreated in Webflow, using Webflow's built-in elements
Created two(2) web pages
Homepage
Another page - call it “page_2” for now
This will be an exact copy of the homepage, needs to be nothing more than a simple “homepage” cloning exercise
The only change will be the inpage navigation - I want the “Homepage” & the “page_2” navigation to be separate elements for internally navigating the page
Hide this page from search engines
What to Keep
Intro animations
Everything in the <div id="logo-area"> can stay as is
Use the Webflow “Code element”
Add the code for these elements in to the CMSs “Head code” & “Footer code”
Refer ro the “Resources(s)” section (below) for the code
View source to located any image files required
Floating Gallery animations
Everything in the <section id="floating-gallery"> can stay as is
Use the Webflow “Code element”
Add the code for these elements in to the CMSs “Head code” & “Footer code”
Refer ro the “Resources(s)” section (below) for the code
View source to located any image files required
What to Update
Navigation
Migrate the current navigation in to the Webflow “Navbar”
For the homepage keep the internal navigation as
Home
Jumps to the top of the first paragraph
Credentials
Jumps to the “Credentials ”section
Contact
Jumps to the “Contact” section
For “page_2” create internal navigation links as follows
Top
Jumps to the top of the first paragraph
Middle
Jumps to a “Middle ”section
Bottom
Jumps to a “Bottom” section
I want to replicate the switching function between <div class="main-menu-wrapper"> & <nav class="mobile-nav">. Triggered by Webflows built-in Tablet/ Mobile breakpoints.
Keyword animations
The animations below need to be replicated using webflow built in elements & GSAP Animation Interactions
I want all of the animation features replicated
MovementI(s)
Opacity changes
Overlapping
Pinning
These are the nine (9) images to animate
Research Image
Animation Sequence
Refer to the files in the “Resources(s) section below
Image Source
https://cdn.prod.website-files.com/682bea8aa26f3f5caeaf149c/682d663f2ca24a87907e68c9_research.png
Inspire Image
Animation Sequence
Refer to the files in the “Resources(s) section below
Image Source
https://cdn.prod.website-files.com/682bea8aa26f3f5caeaf149c/682d663fcdbf9407e12663c1_inspire.png
Design Image
Animation Sequence
Refer to the files in the “Resources(s) section below
Image Source
https://cdn.prod.website-files.com/682bea8aa26f3f5caeaf149c/682d663f5036449bbf75d50d_design.png
Concept Image
Animation Sequence
Refer to the files in the “Resources(s) section below
Image Source
https://cdn.prod.website-files.com/682bea8aa26f3f5caeaf149c/682d663fa8d302b156c5aa20_concept.png
Resonate Image
Animation Sequence
Refer to the files in the “Resources(s) section below
Image Source
https://cdn.prod.website-files.com/682bea8aa26f3f5caeaf149c/68353da5214821d7329e97e3_resonate.png
Build Image
Animation Sequence
Refer to the files in the “Resources(s) section below
Image Source
https://cdn.prod.website-files.com/682bea8aa26f3f5caeaf149c/682d663fc8a696cd19dc385e_build.png
Sensory Image
Animation Sequence
Refer to the files in the “Resources(s) section below
Image Source
https://cdn.prod.website-files.com/682bea8aa26f3f5caeaf149c/683549590e5368e1509dbc6d_sensory.png
Fusion Image
Animation Sequence
Refer to the files in the “Resources(s) section below
Image Source
https://cdn.prod.website-files.com/682bea8aa26f3f5caeaf149c/68645bf15232725113fe7a48_transform_t.png
Transform Image
Animation Sequence
Refer to the files in the “Resources(s) section below
Image Source
https://cdn.prod.website-files.com/682bea8aa26f3f5caeaf149c/68645bf099f0e7efec51499c_fusion_t.png
Resources(s)
HTML
“View Source” on the current homepage
CSS
<link rel="stylesheet" href="style.css">
GSAP/JS
Extract the code from either of the twi files below
This is the origional GSAP code
<script src="js.js" defer></script>
This version of the GSAP code was updated using ChatGPT
<script src="architectural-acoustics.cleaned.js" defer></script>
Fonts
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
Misc
You need to have a Webflow developer's account, we will grant you access via the team members admin feature
You need to be able to recreate the “Keyword animations” (above) using the Webflow GSAP animation feature
This includes the pinning code
Keep the “Animated intro” & “Floating Gallery” as separate HTML & CSS components
Add the code for these elements in to the CMSs “Head code” & “Footer code”
Use the Webflow inbuilt breakpoints for Tablet & Mobile
Provde all quotes in Australian $ - not - US $