Lotties
Here is a demo of Lotties animating on scroll.
But what exactly is a Lottie?
A Lottie is an animation file format that allows us to upload animations easily and in a compact size. One of the advantages that Lotties have over GIF files is that we can scale them up or down without losing resolution.
By default Lottie animations will autoplay when the page is loaded, but we can configure Lotties within Cornerstone to play when triggered by the following actions: scrolling, hover, when visible, on click, and autoplay. Additionally, we can set the Lottie to loop indefinitely, and adjust the animation speed.
Plays On Hover
Plays When Visible
Plays On Click
Autoplays on Infinite Loop
Grid Layouts
Grids allow us to create dynamic layouts where content can overlap like in the following slide example below. In the past, we would have had to make the gradient circle backgrounds and the photo in the foreground one flat image, making it more difficult for clients to update the photo when needed. With the flexibility that Grids provides us, we can design layered graphics and images with live content that can easily be updated by our clients.
Grids also allow us to place content anywhere we want in the overall layout design irregardless of their actual placement in the physical markup. What does this mean? It means we can have different layouts across varying screen sizes without having to duplicate and hide content that can be missed when making edits or updates. We only have to update the content once because it is adjusting to the grid's dynamic layout.
To see this in action, adjust the size of your browser window to see how the content adapts to the grid layout across different screen breakpoints.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Excepteur sint occaecat cupidatat non proident.
Parallax
This is the typical parallax effect we're used to seeing
But we can also create a layered parallax effect, by having a parallax background image and overlapping a transparent or solid image on top. Not only can the parallax work vertically, but we can also have graphics move horizontally across the screen.
Effects
We can add Photoshop-like effects to photographs by using the Mix Blend Mode, which alters the way an image interacts with the layers behind it.
We can also apply the following filters to a section, row, or column, and these can be triggered or adjusted upon interaction with the object. One thing to note about these kinds of effects is that they can be heavy on the browser, and therefore, should not be overused.
Hover over the following images to see it in action:
Blur
Brightness
Contrast
Grayscale
Hue Rotate
Inverse
Saturation
Sepia
Another effect that can be triggered on hover is adding "particles" or horizontal color blocks to sections, rows, or columns. These can be configured to slide in from the sides, top, or bottom. Hover over the following color blocks to see it in action:
Transform effects can be used to add interaction animations or to create interesting element layouts. Elements can be moved on an x-y-z axis.
Hover over me to see animation
In the example above, the text is transformed 23px to the left and 17px down upon hover.
We can have content overlapping with other elements, such as images, icons, etc.
We can combine all of these effects to create layered and intricate interaction effects, such as the following example:
We can also add Javascript code to create interactive experiences, such as expandable section effects when a button is triggered. It is important to note that these kinds of effects should comply with web accessibility standards; therefore, effects that rely on hovering as a trigger action should not be used if it limits a user's access to content.
Section #1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Section #2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Section #3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Components
Components function like centralized templates that contain living versions of our designs and can be updated in real-time throughout the site. This can be useful when we have a section that gets repeated on several pages, because it allows us to update the content in one location and the changes go live across all the instances of that component.
Check out the video below to see how it works:
Components and Dynamic Content
We can take components further and create component elements, such as buttons, where we can specify what parameters are editable (such as text, link, image), while the overall style and design of the object can only be editable from within the original component itself. This not only reduces complexity and streamlines the development of the page, but also facilitates updating content for the client.
Loopers and Dynamic Content
Blog feeds are the most common way we've used Loopers and Dynamic Content across our clients' websites. The main concept is that we can stylize the way a blog card looks and then the blog content is fed through the looper and the blog cards get repeated based on parameters we set, such as category tags.
Blog Post Title 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut…
Blog Post Title 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut…
Blog Post Title 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut…
But we can also use Loopers to populate sections with content such as quotes; a type of content that could get repeated across several pages, but since we're treating them as posts, we have them in a centralized location that enables faster and more efficient updating.
“Lacus sagittis ligula elit habitant libero; parturient placerat commodo. Sed aptent nunc pellentesque pellentesque placerat augue rutrum dictum. Finibus volutpat nisi convallis justo laoreet tortor pellentesque? Quisque sagittis cursus nullam; mus leo blandit torquent. Nunc pharetra semper sem montes ultricies aptent. Gravida magnis potenti blandit magnis odio commodo. Semper etiam volutpat dapibus commodo orci.”
“Non etiam in blandit augue eget donec. Rhoncus tempus magna facilisis consectetur sem pharetra. Maximus rhoncus amet mi nisi metus hac. Fusce sodales torquent convallis arcu per pellentesque. Accumsan imperdiet donec vivamus nisi pulvinar aenean. Gravida tempor sapien taciti ridiculus class nisl auctor pretium. Risus dui tortor curabitur; condimentum amet id. Nostra imperdiet consequat at felis dictum donec nisl. Per sapien amet tincidunt; dictum laoreet vestibulum eget. Penatibus eu imperdiet eros quisque metus orci vitae.”
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”