MDB jQuery element animation sequence

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: MDB jQuery element animation sequence

twentyfour pro asked 7 years ago

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  

Ollie Vincent pro answered 7 years ago

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 7 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.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Closed

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
twentyfour
Pro User
124Support score
11Questions 10Answers
1Snippets likes 2Snippets