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 2 years, 10 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.
