[Bug]: Animate Extension Does not work with scrolling content

[anvaya]

Blazorise Version

1.6.0

What Blazorise provider are you running on?

Bootstrap5

Link to minimal reproduction or a simple code snippet

If you use the animate component on a page that requires scrolling to arrive at the content, the AOS library does not work and the content remains hidden.

<div>
  <Animate Auto Animation="Animations.FadeUp">
       <div class="image_wrapper">
            <img src="https://placehold.co/600x1200" />
             <img src="https://placehold.co/600x1200" />
             <img src="https://placehold.co/600x1200" />
       </div>
   </Animate>
   <Animate Auto Animation="Animations.FadeUp">
       <div>
            <p>This content should be visible as you scroll to this section</p>
            <img src="https://placehold.co/600x400" />
       </div>
   </Animate>
</div>

Steps to reproduce

Just create a page with longish content requiring scrolling. Wrap the content that requires scrolling under the Animate component, now when you scroll to that section, you will not see that content as it still is hidden, AOS has not acted on it.

What is expected?

The content should animate in a standard way when you scroll to elements outside the visible window viewport, and not remain hidden.

What is actually happening?

The content that requires scrolling-to, does not animate and remains hidden.

What browsers do you see the problem on?

No response

Any additional comments?

Tried this manually with AOS library, by adding AOS.refresh on "Window.Scroll", and in OnAfterRender, it still does not work. For some reason, AOS is not triggered, it could be related to the DOM content and event binding. Not sure.

[kmdeveloping]

I would like to add on to this. Within the Carousel component type, Setting animate on slides only triggers the first slide animation.

Expected:

When the Carousel Slide comes into view, the animation is triggered

Comments:

The current behavior of the Carousel looks to render all slides on Page load, this is probably triggering the animations on all slides at once

I have tried delaying the animation with several approaches

override OnInitializedAsync() override OnAfterRenderAsync(bool firstRender) show only on current slide << this seemed to help slightly if the carousel transition was very short

I am out of ideas for combining the two component features

Example:

@rendermode InteractiveServer

<Carousel @bind-SelectedSlide="_selectedSlide" Interval="_defaultInterval">
  <CarouselSlide Name="Slide-1">
    <Animate Anchor="#some-anchor-element-1" Auto Animation="DefaultAnimation">
      ... the rest of the component 
    </Animate>
  </CarouselSlide>
  <CarouselSlide Name="Slide-2">
    <Animate Anchor="#some-anchor-element-2" Auto Animation="DefaultAnimation">
      ... the rest of the component 
    </Animate>
  </CarouselSlide>
  <CarouselSlide Name="Slide-3">
    <Animate Anchor="#some-anchor-element-3" Auto Animation="DefaultAnimation">
      ... the rest of the component 
    </Animate>
  </CarouselSlide>
</Carousel>

[stsrki]

I don't think there is an easy way around this. We need to render all carousels at once to be properly offset-aligned. That way, the slide animation will work.

Maybe as a workaround you can render your Animation component only when the slide comes into view. By wrapping it with the if statement.

<CarouselSlide Name="Slide-3">
  @if ( _selectedSlide == "Slide-3" )
  {  
    <Animate Anchor="#some-anchor-element-3" Auto Animation="DefaultAnimation">
      ... the rest of the component 
    </Animate>  
  }
</CarouselSlide>

[kmdeveloping]

I appreciate the response, I have tried that and it seemed to allow the animation to somewhat work. The delay and duration on the Carousel was tricky becasue that seemed to allow the @if (_slideInView == _slide) to be ignored so the animation would not trigger