Explore the community Forums Lectora Lectora Questions & Answers why only upper object is affected by css animation?

Tagged: 

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #283412 Score: 0
    Profile photo of portia
    portia
    Member
    @portia

    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?

    #287127 Score: 0
    Profile photo of Sergey Snegirev
    Sergey Snegirev
    Member
    contributor
    intermediate
    advanced
    friend finder
    lab member
    junior moderator
    advocate
    LUC16
    LUC16 Attendee
    wise owl
    339 pts
    @ssneg

    Can you share an example html?

    #287128 Score: 0
    Profile photo of Sergey Snegirev
    Sergey Snegirev
    Member
    contributor
    intermediate
    advanced
    friend finder
    lab member
    junior moderator
    advocate
    LUC16
    LUC16 Attendee
    wise owl
    339 pts
    @ssneg

    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.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.