Scroll animation is animating all image banner

Store Design
, ,
1

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..

MyEcomAgent_0-1699194869955.png
MyEcomAgent_0-1699194869955.png1260×751 106 KB

This one should be animated.

data-aos=“fade-left”
for example

PW: 2023

2

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
3

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.

4

@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 :sob:

5

Hi @MyEcomAgent

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

.banner__media img
6

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

7

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

8

Can you please give me an example code?


  {%- if section.settings.image != blank -%}
    

      {%- 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
      }}
    

  {%- elsif section.settings.image_2 == blank -%}
    
      {{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
    

  {%- endif -%}
  {%- if section.settings.image_2 != blank -%}
    

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