Scroll animation is animating all image banner

[MyEcomAgent]

Hi guys,

im trying to animate one image of an image-banner, i just couldn´t figure out, why its applying it to all image-banner.
Surely im pasting the animation into the wrong div..

This one should be animated.

data-aos="fade-left"
for example

myecomagent.com

PW: 2023

[Dan-From-Ryviu]

Hi @MyEcomAgent 

Make sure you point your code using this class so it will be applied to that section only.

#

#Banner-template--19895546118478__19bee54c-e925-4367-8d50-da62bf2d406a .banner__media img

[MyEcomAgent]

But it is a liquid file that im editing, im just putting data-aos="fade-down" after an opening div..

And unfortunately i can´t find the div, wich just belongs to this item im trying to animate.

[MyEcomAgent]

@Dan-From-Ryviu Can you have a look again please?
I´m still struggling with this problem.

My Problem is, that i have multiple image-banner.
I have read your comment, but how do i use it inside the code?
Cause in image-banner.liquid the div is already there right?
Do i just create another div and use class="#Banner-template--19895546118478__19bee54c-e925-4367-8d50-da62bf2d406a .banner__media img"?
I don´t think it works like that..

Please help meeee😭

[Dan-From-Ryviu]

Hi @MyEcomAgent 

Please add code to this class to make that animation work for all image banners 

.banner__media img

[MyEcomAgent]

No i don´t want it to work for all image banners😭
Thats my problem, i want it to be on just one image banner

[Dan-From-Ryviu]

So please point to that image banner using cover ID of section 

[MyEcomAgent]

Can you please give me an example code?

<div data-aos="fade-up" 
  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 %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% 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 %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
      {%- liquid
        assign image_height = section.settings.image.width | divided_by: section.settings.image.aspect_ratio
        if section.settings.image_2 != blank
          assign image_class = 'banner__media-image-half'
        endif
        if section.settings.image_2 != blank and section.settings.stack_images_on_mobile
          assign sizes = stacked_sizes
        elsif section.settings.image_2 != blank
          assign sizes = half_width
        else
          assign sizes = full_width
        endif
      -%}
      {{
        section.settings.image
        | image_url: width: 3840
        | image_tag:
          loading: 'lazy',
          width: section.settings.image.width,
          height: image_height,
          class: image_class,
          sizes: sizes,
          widths: widths
      }}
    </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 %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
      {{ 'hero-apparel-1' | 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 %}>
      {%- liquid
        assign image_height_2 = section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio
        if section.settings.image != blank
          assign image_class_2 = 'banner__media-image-half'
        endif
        if section.settings.image != blank and section.settings.stack_images_on_mobile
          assign sizes = stacked_sizes
        elsif section.settings.image_2 != blank
          assign sizes = half_width
        else
          assign sizes = full_width
        endif
      -%}
      {{
        section.settings.image_2
        | image_url: width: 3840
        | image_tag:
          loading: 'lazy',
          width: section.settings.image_2.width,
          height: image_height_2,
          class: image_class_2,
          sizes: sizes,
          widths: widths
      }}
    </div>

This is what a part of my image-banner.liquid looks like