1. I have 4 objects (without any transitions, delays)
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
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)