Staggered Interactions
Easily stagger your Webflow interactions via this Javascript code. Add staggered interactions to Webflow CMS items or interactions you may have already built without pulling your hair out. Adding this bit of Javascript code will help create staggered Webflow…
Easily stagger your Webflow interactions via this Javascript code. Add staggered interactions to Webflow CMS items or interactions you may have already built without pulling your hair out. Adding this bit of Javascript code will help create staggered Webflow interactions.
How to add it
- Add the custom Javascript to your closing body tags
- Update the Javascript with your class names and requirements
The code
Javascript
<!-- Add to head section -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
<!-- Add to closing body -->
<script>
// Delay your animation
$(".trigger").each(function (i) {
var $item = $(this);
setTimeout(function() {
$item.click();
}, 200*i);
// delays the next animation by 200 milliseconds
});
// TRIGGERS
// Wait before playing animation
setTimeout(() => {
// Put the play below this line
}, 800);
// Play animaton when something is clicked
$( ".your-button-class" ).click(function() {
// Put the play below this line
});
// Play animaton when hovered in
$( ".your-button-class" ).mouseenter(function() {
// Put the play below this line
});
// Play animation when scrolled into view
$('#heading-container').one('inview', function(event, isInView) {
if (isInView) {
// Put the play below this line
} else {
}
});
</script>
