Streaming live at 10am (PST)

Export Project with Iteractions 2.0

#1

I wan’t to know how do i reuse the new Interactions 2.0 on an exported WebFlow Project.

The new Interactions generate dynamic IDs and don’t use slugs like the old ones.

Previously, i just insert the Interaction slug on an element i need it. Now, i don’t know how to do this without duplicating IDs.

Example:

<section data-w-id="3485619b-c65e-c89b-85d7-2f3450130f32" class="section">
    <div class="w-container">
        <header class="section-header w-clearfix">
            <img src="https://d3e54v103j8qbb.cloudfront.net/img/image-placeholder.svg"
                 data-w-id="7726613b-65ea-213f-1da7-6d85e4cbe6bf" class="section-image">
            <h1 data-w-id="42ab0ff6-5009-5fdb-366b-b2960515a9cf" class="section-title">Section Title</h1>
            <h3 data-w-id="bde12205-2b0f-9497-907a-8014682fd6c4" class="section-subtitle">Section Subtitle</h3>
        </header>
        ...

How do i reuse the interaction above on another section?

This problem apply to any webflow project. No Specific link.

2 Likes
#2

I would contact support directly for this question. I think this deserves a little more attention that from community, to make sure it’s accurate to what you’re looking for.

#3

I’d say it is an interesting question deserving attention from us users as well :wink:

1 Like
#4

No doubt, huh :man_shrugging:

#5

Thanks for the suggestion. i will try to contact them, but i think this is really something that can help everyone.

Users using Webflow Host and CMS will not need this, but users that don’t fit on this case will have problems.

#6

+1 for this. I hope @webflow won’t forget users who develop HTML for other frameworks.

3 Likes
#7

Soon you’ll be able to target classes, not just element id’s, in animations so it should work like before.

#8

This is great. right now it uses Ids for HTML tag and affected elements. This really breaks the reuse.

#9

I am having the same problem. My html design was refused for the development team because that. They said that the code is organized, but the code is not readable, when they see these data-w-id…

#10

I signed up for a forum account just to post here, too. I’m using Webflow to more easily design front-ends for my custom django back-ends and exclusively use it with the code exporting function.

However, every time I export the code, it changes all of the IDs on the elements with interactions. So, instead of just updating a couple of templates, I have to painstakingly go through and update each item in every page that has an interaction on it.

This creates huge problems for me and unless it’s fixed, I’ll have to cancel my Webflow subscription and use something else.

#11

Interesting. Do you mean that after modifying interactions in any way export changes all id’s for items with these modified interactions?

#12

You betch up… WEbflow is forgetting about us, Web Application Industrial Developers.

#13

@dadealeus - I just did a test, albeit a simple one.

Created a button. Gave it an id of btn-test. Added a class of button. Added an IX2 Interaction. Exported site.

Here is the HTML.
<div><a id="btn-test" data-w-id="6ce93fda-747c-de3d-37f0-b34034d35abf" href="#" class="button w-button">Button Text</a></div>
So this test shows that the value of the ID did not change.

I also tested setting the interaction to target the .button class instead of the element. Here is the code on export.

<div><a id="btn-test" href="#" class="button w-button">Button Text</a></div>

#14

like me…

#15

Could please, give more details about this approach? Such as a small tutorial. Your solution seems fantastic. Thanks for your interesting in the problem, thanks a lot

#16

What @webdev meant is that the solution is to just stop worrying since your development team’s fears are baseless. If you use elements as targets the only thing that is getting added is a custom data-w-id attribute which doesn’t do anything to the actual id. If you use classes as targets (which I strongly suggest you always do) then no custom attribute is added.

2 Likes
#17

Sorry, if I am misunderstanding, but let me examplify…
For instance…
I have 3 buttons…
Those three buttons belong to the class ‘button-pink’
I need rotate(an animation) ‘only’ the first button, only the first one.
IF I apply my rotation/animation using the ‘Affect: Class’…The three buttons will rotate, not only the first one.
The three buttons will rotate…
For avoid that(I mean only the first button rotate), I need to “improvise”(FAKE A SOLUTION) and chose ‘Only children with this class’ or ‘Only parent with this class’.
HOWEVER, this is improvisation/faking the solution because this button does not have Children or Parent.
This is sort of fake solution… Do you agree???

#18

Or you could add an additional class to just that item and bind your rotation animation to that one.

We are going around in circles here. You get what you get. If you don’t want to create interactions from within the designer, you can always use javascript and the tram.js library binding with ID’s or whatever.

If you ask how to work with what we have, we can help. If not you are really on your own. Peace.

1 Like