Animations are managed using both an animated element, and its parent. The parent receives a class named .has-animation
, which works in tandem with some JavaScript code. That code runs on page load, and then every time the page is scrolled.
Once an element has been detected as scrolled into view, the parent is appended an additional class, named .has-been-revealed
. With minimal exceptions, animations are only triggered on elements with a specific animation class, that is the child of an element bearing both the classes .has-animation
and .has-been-revealed
.
.fade-in-up
.fade-in-right
.fade-in-down
.fade-in-right
.reveal-in
.draw-in-line
.draw-in-line-80
Like the above animations, leverages the class .has-animation
but also the class (on parent still) of .has-image-animation
.
Tilted Text Animation:
Retro Machinery Animation:
Scroll-based Rings:
Scroll-based Globe:
|sass/
| - meta.scss # WP Header Comments for style meta
|
|– utils/ # Misc stuff like variables, helper classes, functions, mix-ins, and animation stuff
| |– _variables.scss # Sass Variables
| |– _functions.scss # Sass Functions
| |– _mixins.scss # Sass Mixins
| |– _helpers.scss # Class & placeholders helpers
| |– animations.scss # Class & placeholders helpers
|
|– base/ # Boilerplate, typography, normalizing -- shouldn't need edits
| |– normalize.scss # Reset/normalize
| |– _typography.scss # Typography rules
| ... # Etc…
|
|– layout/ # Globals, grid system, forms, etc.
| |– _navigation.scss # Navigation
| |– _header.scss # Header
| |– _footer.scss # Footer
| |– _forms.scss # Forms
| ... # Etc…
|
|– components/ # Styles specific to widgets -- overrides for ACF Blocks go here
| |– _buttons.scss # Buttons -- includes default permutations
| |– _carousel.scss # Carousel
| |– _cover.scss # Cover
| |– _dropdown.scss # Dropdown
| ... # Etc…
|
|– sections/ # Styles specific to pages
| |– _home.scss # Home specific styles
| |– _contact.scss # Contact specific styles
| ... # Etc…
|
| – main.scss # Primary Sass file -- only @import and comments in here
Font Faces, Weights, Styles, Sizes
Each Unique Text Element Instance
Other Relevant Elements
Paragraphs & Text Variants
This is normal text.
This is some fancy variant.
This is some other fancy variant
Headings
List Styles
Button Styles
Category block doesn’t work without the API Blog Listing block.
Only works if the page has a parent page, otherwise it assumes you wanna go 🏠. Includes plain, chevron, and arrow (for now, and counting).
Vertical line on desktop; horizontal line on mobile. There is no native vertical line in HTML, but there is for horizontal.
Must be implemented in conjunction with the meganav (see header).
Line height will look wonky pending your brand choice, will need to be refined on a per-site basis (quick and easy to do that, though).
Filter does not render on mobile.
All
Category One
Category Two
Example Item One
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales, nulla vel tristique euismod, orci erat laoreet massa, vitae accumsan augue tellus aliquet tortor. Mauris ante tortor, varius nec posuere vitae, tincidunt at tortor. Sed malesuada elementum sollicitudin. Quisque ornare neque quis orci laoreet egestas eu at justo. Vestibulum a congue nunc. Nulla ultricies tortor vel nunc rutrum scelerisque. Sed accumsan aliquet ex sit amet congue. Phasellus eu nibh ipsum. Nunc dapibus, odio sit amet tempus interdum, purus quam accumsan turpis, nec posuere metus elit vitae ipsum. Praesent non lorem id tellus pretium lacinia. Nunc porta lectus mi, eu ornare ipsum facilisis a. Nam et eros aliquet, tristique lorem ac, congue nisi. Sed faucibus ornare diam sed ultrices. Suspendisse quis blandit orci. Phasellus dictum dictum sapien eget tempus. Curabitur ut vestibulum erat.
Example Item One
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales, nulla vel tristique euismod, orci erat laoreet massa, vitae accumsan augue tellus aliquet tortor. Mauris ante tortor, varius nec posuere vitae, tincidunt at tortor. Sed malesuada elementum sollicitudin. Quisque ornare neque quis orci laoreet egestas eu at justo. Vestibulum a congue nunc. Nulla ultricies tortor vel nunc rutrum scelerisque. Sed accumsan aliquet ex sit amet congue. Phasellus eu nibh ipsum. Nunc dapibus, odio sit amet tempus interdum, purus quam accumsan turpis, nec posuere metus elit vitae ipsum. Praesent non lorem id tellus pretium lacinia. Nunc porta lectus mi, eu ornare ipsum facilisis a. Nam et eros aliquet, tristique lorem ac, congue nisi. Sed faucibus ornare diam sed ultrices. Suspendisse quis blandit orci. Phasellus dictum dictum sapien eget tempus. Curabitur ut vestibulum erat.
Example Item Two
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales, nulla vel tristique euismod, orci erat laoreet massa, vitae accumsan augue tellus aliquet tortor. Mauris ante tortor, varius nec posuere vitae, tincidunt at tortor. Sed malesuada elementum sollicitudin. Quisque ornare neque quis orci laoreet egestas eu at justo. Vestibulum a congue nunc. Nulla ultricies tortor vel nunc rutrum scelerisque. Sed accumsan aliquet ex sit amet congue. Phasellus eu nibh ipsum. Nunc dapibus, odio sit amet tempus interdum, purus quam accumsan turpis, nec posuere metus elit vitae ipsum. Praesent non lorem id tellus pretium lacinia. Nunc porta lectus mi, eu ornare ipsum facilisis a. Nam et eros aliquet, tristique lorem ac, congue nisi. Sed faucibus ornare diam sed ultrices. Suspendisse quis blandit orci. Phasellus dictum dictum sapien eget tempus. Curabitur ut vestibulum erat.
Example Item Two
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales, nulla vel tristique euismod, orci erat laoreet massa, vitae accumsan augue tellus aliquet tortor. Mauris ante tortor, varius nec posuere vitae, tincidunt at tortor. Sed malesuada elementum sollicitudin. Quisque ornare neque quis orci laoreet egestas eu at justo. Vestibulum a congue nunc. Nulla ultricies tortor vel nunc rutrum scelerisque. Sed accumsan aliquet ex sit amet congue. Phasellus eu nibh ipsum. Nunc dapibus, odio sit amet tempus interdum, purus quam accumsan turpis, nec posuere metus elit vitae ipsum. Praesent non lorem id tellus pretium lacinia. Nunc porta lectus mi, eu ornare ipsum facilisis a. Nam et eros aliquet, tristique lorem ac, congue nisi. Sed faucibus ornare diam sed ultrices. Suspendisse quis blandit orci. Phasellus dictum dictum sapien eget tempus. Curabitur ut vestibulum erat.
Example Item
Example Item
Dynamically shows results from search query when added to a “Search” Gutenberg template. If not part of that template, will render a list of all pages.
Choosing the right addiction treatment can feel overwhelming, but understanding your needs is key to finding the best fit. Whether you or a loved one is struggling with addiction, selecting the right program depends on the level of care required and where you are in your recovery journey. In this blog, we’ll explore the three […]
Shame and guilt are deeply intertwined in addiction, often acting as the emotional drivers that keep people stuck in a harmful cycle. Shame makes a person feel inherently flawed or unworthy, while guilt focuses on the actions they’ve taken and the harm they’ve caused. Together, these emotions create a constant inner battle, reinforcing feelings of […]
Self-forgiveness is essential for healing and moving forward in recovery. It allows you to release the guilt and shame that can hold you back and embrace a healthier, more positive mindset. In this post, we’ll define self-forgiveness in recovery and share tips and activities to help you practice it.
Some people addicted to sex know it but refuse to admit it, while others are unsure. Socially acceptable sexual behaviors can still cause serious personal consequences. Inappropriate sexual behaviors may also emerge alongside other addictions. For example, some only cheat when drunk. While alcohol may be part of the issue, the cheating itself is also […]
Addiction and recovery are extremely personal experiences. If you’ve experienced either, you know how isolating they can be. No matter what outside forces affect you, ultimately, you are the one responsible for your actions. However, we are relational beings, and we require the company and support of others and society as a whole in order […]
It’s no secret that alcohol consumption is a regular, socially acceptable part of many people’s lives. Whether it’s a glass of wine with dinner, beers during the big game, champagne to toast a special event, there’s no shortage of reasons to drink. While light to moderate drinking doesn’t typically raise too many alarm bells for […]
If you or a loved one experiences a lot of changes in mood or has trouble managing emotions, you may be dealing with emotional dysregulation. This term isn’t exactly one we hear a lot, so you may be wondering, What is emotional dysregulation? Learning about it, its symptoms, and what it can be indicative of, can help you find the right support for mental health and recovery.
Complex trauma can be a heavy and often misunderstood experience, affecting many aspects of life, especially when trauma is experienced in childhood. Unlike typical trauma, it stems from long-term, repeated emotional or physical abuse, often from someone in a trusted position, and can cause deep, lasting changes in a person’s identity and relationships. The effects […]
Innovations in medical science have allowed us to gain a better understanding of the biological, genetic, and physiological aspects of disease, including mental health disorders. Neurodiagnostic tools are giving us a real-time window into brain function as it relates to cognitive processing and emotional regulation. The structure of the brain can affect how we think, just like how we think can affect the structure of the brain. Tools like brain mapping can be useful in both the diagnosis and treatment of mental health conditions, providing critical input and feedback to accelerate recovery.
At our addiction treatment center, we believe that group therapy is one of the most valuable tools in the recovery process. While individual therapy can help address personal issues, group therapy creates a unique environment where individuals can connect with others who understand their struggles. Recovery can often feel isolating, but group therapy offers a […]
No images found.
No images found.