I am relatively new to velocity JS. I want to introduce some characters (an object containing an image URL and a name) like a transition sequence with images and names coming alternatively from left and right. I have made the code and it works, however there is one major issue and I feel there is some conceptual mistake in my approach.
Unfortunately, I could not take a working code example out of the big system. But basically in Backbone JS I am selecting the element and setting its .html() to some content from DB and chaining this call with a call to velocity.
As an example:
@$eventResultAvatarContainer.html("<img src=#{@avatarURLs[0]}>").velocity('transition.bounceLeftIn', { duration: 2000, complete: @entryIntroduction })
which works but in the following sequence:
How can I get rid of 1. above i.e. before the chained call executes, is there a way to not have the element visible till velocity animation starts ?
Can't be sure without seeing actual code, but try using style="visibility:hidden;" to hide the eventResultAvatarContainer before using .css({visibility:'visible'}) to show them right before .velocity.
This makes sure the element is not rendered before velocity has a chance to act on it.
I did a jsfiddle to try to mockup your environment, you can use it to do further testing, or try to recreate your environment as much as possible.