Not sure how to get started or need help customizing this template? We have put together some information and tutorials to help you update your template as seamless as possible. See below:
We recommend first updating the style guide to the typography, fonts, colors and styling you'd like to use for your project and/or brand. Utilizing the style guide will save you a lot of time and efforts while updating your template. Below are some videos and guides to help:
A custom, responsive navbar and nav menu were created for this template. Below is a video to help you find and update them:
Step 0:
Before doing any project updates we suggest you first choose your color palette and typography and update the Style Guide.
*Note: This template has very complex interactions which can make changing the colors one by one tedious. Using the style guide correctly should save you heaps of time.
Step 1:
Decide on the number of projects and add them to the CMS. Here's a video on how to update the "Projects" CMS Collection.
Step 2:
Watch this video to help you understand the anatomy of the CMS slider and get an example of how you'd update the slider layout if your number of projects change.
Select "Projects Camera" div and set Overflow to 'Visible'. You should now be able to see all your projects when scrolling from right to left.
Delete or add projects with the number of projects you have chosen. Each project is in its own Collection List (due to the complexity of the scrolling interaction) and all projects can be found in the "Projects Scrolling Frame" div and are named: "Project List Wrapper - CMS".
Once you've added or deleted the relevant projects make sure each Collection List ("Project List Wrapper - CMS") is set to the appropriate Project Number and order Collection Lists are in numerical order.
Once you have your projects organized and ready, set the "Projects Camera" div back to Overflow - 'Hidden'.
Set the "Projects Tracks" div to the correct height. For example, this template has 8 projects so the height is set to 800 VW. If you have only 5 projects set the height to 500 VW.
Add or delete the relevant "Current Slide Number" text block(s). If you're adding more than 8 projects make sure to add the relevant combo class to each additional slide number. For example: if you have 10 projects you'll need to add 2 more "Current Slide Number" text blocks and give one a combo class of "9" and one a combo class of "10". Make sure they are in the correct numerical order.
Step 3:
Last but not least: update the scrolling interaction to be in sync with the new number of projects you have updated. Below we share how you'd go about doing this:
Select the "Project Tracks" (you'll be able to see a small green icon in the top right corner which is indicating that an animation/interaction is happening).
.png)
Once selected go to "Interactions" and select the "While Scrolling In View - Project Scrolls Horizontally", then press "Project Scrolls Horizontally" and all the Scroll Actions will show.
Once you see what's in the below image, you've come to the right place.
Note: If you scroll through, you'll notice there's quite a lot happening in this interaction. Don't feel overwhelmed! Just breath. Everything you need is right there; things just need a bit of a reorganization/clean-up. And remember, if you mess up you can always hit the "undo" icon to undo your last steps and start over again. So here's what you need to do next:
First, scroll to the bottom and choose "Projects Scrolling Frame".
Change the move action VW to the correct number. The way to determine this number is by subtracting 100 from the height VW of the "Project Tracks" and then adding it as a negative number.
So, for example: this template's "Project Tracks" has a height of 800 VW so the "Projects Scrolling Frame" has an interaction action of move -700 VW. If you have changed your "Project Tracks" to a height of 500 VW (5 projects) then you will need to change the "Projects Scrolling Frame" action to move -400 VW. Changed your "Project Tracks" to a height of 300 VW (only 3 projects)? Then you will need to change the "Projects Scrolling Frame" action to move -200 VW. And so on...
You can learn more here about why this is set up like this.
Next, you'll need to delete any actions you're no longer using. Start from the bottom (keyframe 100%) and go up to the top (keyframe 0%) and select and delete all actions no longer needed.
For example, if you have removed projects 6-8 and only have 5 projects, you'll need to delete any actions that have a combo class of 6, 7, or 8. You'll be able to see the class name below each time you select a new action. Example:
In the screenshot above, you can see I have the action Text Color "Current Slide Number" with a combo class "8" selected, and the Class = Current Slide Number; 8 (shown in blue); you would delete this action if you are no longer using project 8.
Lastly, once you have deleted the actions no longer needed, then you'll need to reorganize the remaining actions to the correct keyframe %. A little bit of math is needed here, plus some trial and error.
Currently, the different action/intervals are as follows:
i.
12% intervals with a 1% transition
Section - background color transition
Cursor - border-color transition
Slider Line - background color transition
Current Slide Number - text color transition
ii.
13% intervals
Project Container - Scale
iii.
7% intervals with a 1% transition
Current Slide Number - Opacity
***So, if you only have 5 projects, for example, the intervals would change to this:
i.
~19% intervals with a 1% transition
Section - background color transition
Cursor - border-color transition
Slider Line - background color transition
Current Slide Number - text color transition
ii.
~20% intervals
Project Container - Scale
iii.
~11% intervals with a 1% transition
Current Slide Number - Opacity
As stated before, a bit of trial and error is best to see if the transitions are aligning properly and then adjust the keyframes to get the transitions to your liking. The best way to visually view the changes you've made to the animation is to toggle on "Live Preview is On" and then scroll down the page to see the animation in real-time.
If you have followed all these steps completely and are still finding difficulties please reach out to us here and we will do our best to get back to you within 24-48 hours.
We also suggest you check out this video on horizontal scrolling and this Webflow University course to learn more about Webflow interactions and animations.
A custom cursor was created for this template that can be customized to your liking or removed/replaced to a standardized cursor. The cursor is a seperate element added to each page, rather than a symbol, due to the different animations set to various interactions. Below is a video explaining how the cursor works plus additional resources to optimize your custom cursors: