Reusing interactions just got way easier

<p>Following up on our <a href="<https://webflow.com/feature/interactions-2-0-1>">last batch of updates</a>, we’ve made a final round of updates to interactions that should make it a lot easier to reuse interactions across your project.</p><p>Here’s the quick overview, with more detail on each update below:</p><ul><li><strong>Add interactions to Collection Lists. </strong>Now you can apply interactions to one item in a Collection List and see those interactions take effect for each item in the list.</li><li><strong>Set triggers at the class</strong> <em><strong>or</strong></em> <strong>element level.</strong> Now you can trigger animations based on an event for every element of a given class, in addition to the existing option to trigger animations based on events for only a specific element.</li><li><strong>Target classes and triggers in animations.</strong> Now you can specify actions in an animation to affect a single element, an entire class, or the triggering element itself.</li></ul><p><strong>Note:</strong> Before this update, you could reuse interactions by “replacing elements” in an animation with other elements or classes. Since these updates make that process a lot simpler, we’re phasing that option out.</p><h3>Add interactions to Collection Lists</h3><p>As promised, now you can add our new interactions to items within a Collection List, making it easy to create repeating interactions on the CMS-driven sections of your project. </p><h3>Target classes and triggers in animations</h3><p>Now when you select an action in your animation, you can specify that action to affect:</p><ul><li>Only the element selected on canvas (the default, and already supported)</li><li>All elements with that class (along with options to limit to sibling and children elements)</li><li>The element that is triggering the interaction</li></ul><figure class="w-richtext-align-center" style="max-width: 598px;" data-rt-type="image" data-rt-align="center" data-rt-max-width="598px"><div><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/64f9399ca7d13575ff21c322Screen%20Shot%202018-02-23%20at%209.58.55%20AM.png>" alt="New targeting options for actions in animation lists."></div><figcaption>‍<em>New targeting options for actions in animation lists.</em></figcaption></figure><h3>Set triggers at the element <em>or</em> class level</h3><p>We’ve also added the option to apply interactions triggers to all elements with the same class (along with the existing option to apply triggers to a specific element on the page) which gives you the control to quickly apply common interactions across repeating elements like buttons, headlines, and more.</p><figure class="w-richtext-align-center" style="max-width: 240px;" data-rt-type="image" data-rt-align="center" data-rt-max-width="240px"><div><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/64f9399ca7d13575ff21c03dtoggle%20trigger%20type.gif>" alt="‍Now you can apply animations on a single element, or all elements that share the same class."></div><figcaption>‍‍<em>Now you can apply animations on a single element, or all elements that share the same class.</em></figcaption></figure><p>For more details and some step by step examples, check out our guide to <a href="<https://university.webflow.com/article/reusing-interactions>" data-rt-link-type="external">reusing interactions</a> on Webflow University.</p>