Skip to content

Commit

Permalink
add animation to Image banner and Image with text
Browse files Browse the repository at this point in the history
  • Loading branch information
@metamoni
metamoni committed Mar 7, 2023
1 parent 6c277d4 commit 935e898
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 7 deletions.
57 changes: 57 additions & 0 deletions assets/base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3120,3 +3120,60 @@ details-disclosure > details {
.rte blockquote > * {
margin: -0.5rem 0 -0.5rem 0;
}

/* Animations */

.scroll-animation__trigger {
transition: opacity 0.55s ease-in-out;
opacity: 0;
}

.scroll-animation__trigger--active {
animation: 0.55s ease-in-out slideIn forwards;
}

@keyframes slideIn {
from {
transform: translateY(10vh);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}

/* Section-specific motion behavior. */

.banner.scroll-animation__trigger,
.banner.scroll-animation__trigger--active {
opacity: 1;
animation: none;
}

.banner__media.scroll-animation__trigger,
.banner.scroll-animation__trigger:after {
transition: opacity var(--duration-long) ease-in-out;
}

.banner__media.scroll-animation__trigger--active,
.banner.scroll-animation__trigger--active:after {
animation: none;
opacity: 1;
}

/* Turn off animations if JS is turned off. */
.no-js .scroll-animation__trigger,
.no-js .scroll-animation__trigger--active {
opacity: 1;
animation: none;
}

/* Respect the visitor's motion preferences. */
@media (prefers-reduced-motion) {
.scroll-animation__trigger,
.scroll-animation__trigger--active {
opacity: 1;
animation: none;
}
}
17 changes: 11 additions & 6 deletions sections/image-banner.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,17 +24,22 @@
{%- endif -%}

{%- style -%}
#Banner-{{ section.id }}::after {
#Banner-{{ section.id }}.scroll-animation__trigger::after {
opacity: 0;
}

#Banner-{{ section.id }}::after,
#Banner-{{ section.id }}.scroll-animation__trigger--active::after {
opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
}
{%- endstyle -%}

<div
id="Banner-{{ section.id }}"
class="banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ section.settings.image_height }}{% if section.settings.stack_images_on_mobile and section.settings.image != blank and section.settings.image_2 != blank %} banner--stacked{% endif %}{% if section.settings.image_height == 'adapt' and section.settings.image != blank %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}"
class="banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ section.settings.image_height }}{% if section.settings.stack_images_on_mobile and section.settings.image != blank and section.settings.image_2 != blank %} banner--stacked{% endif %}{% if section.settings.image_height == 'adapt' and section.settings.image != blank %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-animation__trigger{% endif %}"
>
{%- if section.settings.image != blank -%}
<div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}">
<div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-animation__trigger{% endif %}">
{%- liquid
assign image_height = section.settings.image.width | divided_by: section.settings.image.aspect_ratio
if section.settings.image_2 != blank
Expand All @@ -61,12 +66,12 @@
}}
</div>
{%- elsif section.settings.image_2 == blank -%}
<div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}">
<div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-animation__trigger{% endif %}">
{{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- endif -%}
{%- if section.settings.image_2 != blank -%}
<div class="banner__media media{% if section.settings.image != blank %} banner__media-half{% endif %}">
<div class="banner__media media{% if section.settings.image != blank %} banner__media-half{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-animation__trigger{% endif %}">
{%- liquid
assign image_height_2 = section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio
if section.settings.image != blank
Expand All @@ -93,7 +98,7 @@
}}
</div>
{%- endif -%}
<div class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width">
<div class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width{% if settings.animations_reveal_on_scroll %} scroll-animation__trigger{% endif %}">
<div class="banner__box content-container content-container--full-width-mobile color-{{ section.settings.color_scheme }} gradient">
{%- for block in section.blocks -%}
{%- case block.type -%}
Expand Down
2 changes: 1 addition & 1 deletion sections/image-with-text.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
}
{%- endstyle -%}

<div class="image-with-text image-with-text--{{ section.settings.content_layout }} page-width isolate{% if settings.text_boxes_border_thickness > 0 and settings.text_boxes_border_opacity > 0 and settings.media_border_thickness > 0 and settings.media_border_opacity > 0 %} collapse-borders{% endif %}{% unless section.settings.color_scheme == 'background-1' and settings.media_border_thickness > 0 and settings.text_boxes_shadow_opacity == 0 and settings.text_boxes_border_thickness == 0 or settings.text_boxes_border_opacity == 0 %} collapse-corners{% endunless %} section-{{ section.id }}-padding">
<div class="image-with-text image-with-text--{{ section.settings.content_layout }} page-width isolate{% if settings.text_boxes_border_thickness > 0 and settings.text_boxes_border_opacity > 0 and settings.media_border_thickness > 0 and settings.media_border_opacity > 0 %} collapse-borders{% endif %}{% unless section.settings.color_scheme == 'background-1' and settings.media_border_thickness > 0 and settings.text_boxes_shadow_opacity == 0 and settings.text_boxes_border_thickness == 0 or settings.text_boxes_border_opacity == 0 %} collapse-corners{% endunless %} section-{{ section.id }}-padding{% if settings.animations_reveal_on_scroll %} scroll-animation__trigger{% endif %}">
<div class="image-with-text__grid grid grid--gapless grid--1-col grid--{% if section.settings.desktop_image_width == 'medium' %}2-col-tablet{% else %}3-col-tablet{% endif %}{% if section.settings.layout == 'text_first' %} image-with-text__grid--reverse{% endif %}">
<div class="image-with-text__media-item image-with-text__media-item--{{ section.settings.desktop_image_width }} image-with-text__media-item--{{ section.settings.desktop_content_position }} grid__item">
<div
Expand Down

0 comments on commit 935e898

Please sign in to comment.