Image appearance on first load (amp-fx)

Hello @egornmore

Thank you for the support topic, the amp-fx-collection may be conflicting with amp-img‘s lazy loading feature.

I will recommend adding the image in a container div and adding amp-fx animations on the container.

eg :

<div amp-fx="fade-in" data-duration="2000ms">
  <img src="'. $image_url[0] .'" height="800" width="1700" alt="'. $attributes["image_alt"] .'" amp-fx="fade-in" data-duration="2000ms" />
</div>

Hello @milindmore22

Tested with container div – same issue. I can do it in a bit tricky way by creating an overlaying absolute div with body background color and fade-out. Does amp-fx-collection has fade-out animation? Thanks for your time

Can you please check this example with data-easing="ease-in-out"

if you wanted to add keyframe based custom animations please check the amp-animation component.

Hi @milindmore22
I’ve checked the example provided, it’s done the same way as I’ve tried before. Also, I’ve tried keyframes animation with the amp-animation component, unfortunately still a blink issue on load. The only solution that works ok is to create an overlaying div with fade-out animation (see screenshot), then it looks like the image is fading in (video attached). Do you know if there is a way to use animation-direction with amp-fx? I need ‘fade-out’ animation rather than fade-in in particular solution.

• This reply was modified 3 years, 4 months ago by egornmore.

Hello @egornmore

I checked docs for amp-fx-collection but it seems that there is no fade-out animation.

Can you try data-easing=”ease-out” on overlay and data-easing=”ease-in” on image.

So fade-in animation will begin quickly on overlay and slow down at the end but on the image it starts slowly and ends quickly, creating a fade-out effect.

Hope this helps!

Hello @milindmore22
I’ve tried your solution, now it appears smoothly and disappears smoothly. I can’t make it work with ‘amp-fx’. I’ll just leave it with overlaying div CSS fadeout solution for now, maybe will post a GIT feature request for adding amp-fx ‘fade-out’ or fixing lazyload + amp-fx conflict later. Thanks for your time.

Hello @egornmore

Thank you for your patience, I tried to help the best I can, but I will recommend approaching the AMP core team on slack #using-amp channel or on StackOverflow regarding how you can use a specific component.

I will mark this topic as resolved, feel free to open a new support topic if you need further assistance.