Start interaction by data-w-id

Hello!

Does somebody know how to start Webflow interaction by custom JS code if i know only data-w-id?
IE start animation bind to data-w-id…

function webflowfAnimationStart(reference, playOrStop, resetStyle){
	
	var state = Webflow.require( 'ix2' ).store.getState();
	var elements = state.ixElements;
	var instances = state.ixInstances;

	$.each( elements, function( elementname, value ) {
	  if(value.ref == reference){
		  var matchID = elementname;
		  //console.log(matchID);
		  //console.log(ref);
	  
		  $.each( instances, function( instanceobj, instance ) {
			  var elementId = instance.elementId;
			  if(elementId == matchID){
				  //console.log(instance);
				  instances[instanceobj].active = playOrStop;
				  if(resetStyle){
					  reference.removeAttribute("style"); 
				  }
				  return false;
			  }
		  });
		  return false;
	  }
	});
}

// USAGE EXAMPLE :

$(".animfade").on("mouseover", function () {`
        //pause animation
    	webflowfAnimationStart(this, false, true);
    	
    	$(this).on("mouseout", function () {
           //resume animation
    		webflowfAnimationStart(this, true);
    	});

});
1 Like

I found the way better than to use Webflow ID.
It allows to control Webflow Animation…

To start or pause animation you need to pass object to function :
var cart = document.getElementById(“cart”);

webflowfAnimationStart(cart, false, true);
(function itself you can find in this post)

3-rd argument reset style, made by previous animation change if “true”

1 Like

Do you have an example of this I could checkout?

Animation on blinking text “Стеклянные перегородки”