Topic: MDB jQuery element animation sequence
Goodmorning all,
I hope you are all doing fine.
I have a little question on cards and animations. I have 3 cards in a row, that are revealed when scrolling down. That's good. But I want them to animate in a sequence, not all at the same time.
To clarify:
Now: 3 cards rotate at the same time
What I try to achieve: first card rotates and finishes animation, then the second card starts... and so on.
FYI: I am using the jQuery version of MDB.
Thanks all for your help,
Carpe Diem !
kind regards,
24
Add comment
If you look at the bottom of the page https://mdbootstrap.com/css/animations/#options it tells you how to add this functionality.
You would need to use the
data-wow-delay attribute.
twentyfour pro commented 6 years ago
Ok I missed that, thanks. For those wondering. I had to add it to a card and instead of hard-coding it in html, I added the following jQuery: @for $i from 1 to 10 { .card:nth-child(#{$i}) { animation-delay: $i * 0.20s; animation-duration: $i * .5s; } } Of course you will have to change the .card accordingly.Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Closed
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags