why only upper object is affected by css animation?

portia
portia Community Member Posts: 6
1. I have 4 objects (without any transitions, delays)



Page1:

-img1

-img2

-img3

-img4



2. I have animate css

3. I assign certain classes to objects (animated zoomIn)

4. When I playback page it is only uper object (img4) affected properly by animation.

img1-3 just appears with delay when animation for img4 finished.

5. If I rearrange



Page1:

-img4

-img2

-img3

-img1



img1 will be affected and so on.



Why is it so?

Comments

  • ssneg
    ssneg Community Member Posts: 1,466 ☆ Roadie ☆
    Can you share an example html?
  • ssneg
    ssneg Community Member Posts: 1,466 ☆ Roadie ☆
    Okay, we've looked at HTML and traced it down to the issue with DOM object creation and image loading timeline.

    Here's the timeline:

    1. Page loads

    2. Trivantis.js starts building elements (images)

    3. Elements are animated immediately (because they have inline classes)

    4. Image content is not loaded immediately, so empty elements are animated and the image simply pops in at the end.



    So ideally the animation should start after the image is loaded, not just after the IMG element is created. Potential solutions:

    - check for image loading, animate via JS, not CSS

    - preload images (e.g. by placing them on a previous page and hiding)



    Hope this helps.