Responsive testimony slider using JavaScript and Anime.js
Design comparison
Solution retrospective
A simple testimony slider with me trying out Anime.js to animate opacity. Click on buttons or press left and right arrow keys for next testimony.
Enjoy and share your thoughts on improvements.
Community feedback
- @Jay-0331Posted over 2 years ago
Great Work, great animation and always give image tag ALT attribute.
Happy Coding
1 - @grace-snowPosted over 2 years ago
Hi
I think the animation looks strange in this because of the delay and things fading in at different times. The expected animation for a slider/carousel would be for it to slide sideways following the arrows in the buttons that form visual queues. As you can't slide like that when you are replacing markup with js like this, I would at least animate everything together rather than having this staggered effect you have now.
In the html, the quote image is decorative so should not have a filled alt attribute Have you considered using the figure and figcaption and blockquote tags for the quotes? The semantics doesn't make much sense at the moment of an image and 2 paragraphs.
I hope these ideas are helpful
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord