Custom Interaction New data() short code 🤯

Blocs for Mac 6.1 introduces a brand new feature to custom interactions that is going to be a real game changer and massively change the way you create interactions, it will allow you to do more with less! :sunglasses:

You can now use the short code data() within your custom interactions to retrieve custom attribute data from the trigger element.

How it Works
Let me explain how this all works. :nerd_face:

I have a button that I am using to trigger a custom interaction.

I have a data attribute added to this button (data-target-page) that contains a link to another page.

Within the Custom Interaction that this button is connected to, I use the new data() short code to get this attribute and feed it into a navigate to URL rule.

The benefit of this is, I can now use a single interaction on multiple buttons rather than create a separate interaction to link to each page. All I have to do is change the custom data attribute on the trigger element (in this case a button) and this will effect how the interaction works.

You can feed these data() values into into any of the text fields with your Custom Interaction Rules and you can use any type of string data to pass into the interaction. So you could feed in an elements ID string or a colour hex code string, whatever you want really.

Currently data() will only work on elements that trigger interactions, it will not work on the page load or scroll trigger.

4 Likes

Nice added feature, Norm! :smiley:
Where do we get a list of the short code that could be used with Interaction?

There is no list you can use any type of attribute e.g data(get-myspecial-data) or data(blocs-rocks). You just need to make sure the trigger element has the data attribute applied.

The page transition experiment uses this new method.

2 Likes

Sounds like a fantastic addition, @Norm.

I can already envision a few cool use cases for this feature. However, I would greatly appreciate it if you could share a few examples where the data() short code proves particularly useful. Thanks a bunch!

3 Likes

Hey @Eldar I have just posted a new example using the data() short code feature to dynamically populate the content of a modal.

2 Likes

Thanks, Norm! :pray:

1 Like