<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="247668" data-post-id="247668">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="benlime" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/benlime/120/5858_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  benlime
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Elixir Desktop seems really nice. I’d love to give it a try sometime! It’s absolutely awesome that LiveView can be used to create native applications.</p>
<p>Meanwhile I got seamless page transitions running. It’s as easy as just defining an <code>exit</code> prop to the <code>motion</code> component. There are three awesome things happening with it.</p>
<ol>
<li>Automatically animate exits triggered from the server. This happens for example by a conditional render based on a prop. (e.g. <code>@is_visible</code> or something like this).</li>
<li>Trigger exits manually by e.g. binding it. <code>phx-click={LiveMotion.JS.hide(to: "#main-content")</code>.</li>
<li>Automagically handle page transitions triggered by e.g. <code>live_redirect</code>.</li>
</ol>
<p>Can’t wait until I can ship the first version of the library.</p>
<p>EDIT: If you like to see it live, you can test it on <a href="https://benvp.co" rel="noopener nofollow ugc">https://benvp.co</a> (which is my little page <img src="https://forum.elixirforum.com/images/emoji/apple/wink.png?v=15" title=":wink:" class="emoji" alt=":wink:" loading="lazy" width="20" height="20">)</p>
<p>Here is a quick demo:<br>
<a href="https://cleanshot-cloud-fra.accelerator.net/media/26144/yvBCYQ2B1940j2e20mhHJO12vauM1cfJo5gJgRP0.mp4" class="onebox" target="_blank" rel="noopener nofollow ugc">https://cleanshot-cloud-fra.accelerator.net/media/26144/yvBCYQ2B1940j2e20mhHJO12vauM1cfJo5gJgRP0.mp4</a></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="247668" data-batch-url="/posts/batch_likers">
                        11
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/a-library-for-high-performance-liveview-animations/46972/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-247668" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="247668"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #11"></div>
  </section>
</div>
    <div class="postbit" id="247694" data-post-id="247694">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="thomasbrus" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/thomasbrus/120/40196_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  thomasbrus
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>That looks amazing <img src="https://forum.elixirforum.com/images/emoji/apple/heart_eyes.png?v=15" title=":heart_eyes:" class="emoji" alt=":heart_eyes:" loading="lazy" width="20" height="20"></p>
<p>Do you already have an idea what the installation/setup would look like (aside from installing a hex package of course)?</p>
<ul>
<li>npm install motion</li>
<li>and install/copy custom hook, I suppose?</li>
</ul> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="247694" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/a-library-for-high-performance-liveview-animations/46972/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-247694" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="247694"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #12"></div>
  </section>
</div>
    <div class="postbit" id="247729" data-post-id="247729">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="benlime" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/benlime/120/5858_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  benlime
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>As the default phoenix installation moved away from adding node I’d like to make the installation as easy as possible without requiring node. So probably I’ll bundle the <code>motion</code> package inside the hex package. I might provide an option to pass the functions from <code>motion</code> during the setup in case somebody wants to use npm instead.</p>
<p>The setup currently looks like this:</p>
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/b/0/b088468d77d6fd999848032546a19a72db336e8b.jpeg" data-download-href="https://forum.elixirforum.com/uploads/default/b088468d77d6fd999848032546a19a72db336e8b" title="image" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/optimized/3X/b/0/b088468d77d6fd999848032546a19a72db336e8b_2_690x532.jpeg" alt="image" data-base62-sha1="pbG0f3zR8143Z7Wrr8KLuHHzqRl" width="690" height="532" srcset="https://forum.elixirforum.com/uploads/default/optimized/3X/b/0/b088468d77d6fd999848032546a19a72db336e8b_2_690x532.jpeg, https://forum.elixirforum.com/uploads/default/optimized/3X/b/0/b088468d77d6fd999848032546a19a72db336e8b_2_1035x798.jpeg 1.5x, https://forum.elixirforum.com/uploads/default/optimized/3X/b/0/b088468d77d6fd999848032546a19a72db336e8b_2_1380x1064.jpeg 2x" data-dominant-color="351341"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">image</span><span class="informations">1608×1242 65 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div><p></p>
<p>I’d like to remove the need for manually adding <code>handleMotionUpdates</code>, but currently it’s a little ugly to move this logic into the hook. I opened up an issue in the LiveView repo for the one who is interested <a href="https://github.com/phoenixframework/phoenix_live_view/issues/1940" class="inline-onebox" rel="noopener nofollow ugc">Hooks: pass the new element into beforeUpdate · Issue #1940 · phoenixframework/phoenix_live_view · GitHub</a></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="247729" data-batch-url="/posts/batch_likers">
                        7
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/a-library-for-high-performance-liveview-animations/46972/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-247729" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="247729"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #13"></div>
  </section>
</div>
    <div class="postbit" id="247891" data-post-id="247891">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="03juan" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/03juan/120/23111_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  03juan
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>For what it’s worth handling it in the dom update makes sense to me as it’s the same way that vue.js is meant to be propagated and as Chris says it’s the way to go.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="247891" data-batch-url="/posts/batch_likers">
                        3
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/a-library-for-high-performance-liveview-animations/46972/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-247891" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="247891"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #14"></div>
  </section>
</div>
    <div class="postbit" id="248219" data-post-id="248219">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="benlime" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/benlime/120/5858_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  benlime
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I released the first version of the library → See <a href="https://forum.elixirforum.com/t/livemotion-high-performance-animations-for-phoenix-liveview/47165" class="inline-onebox" rel="nofollow">🍿 LiveMotion - High performance animations for Phoenix LiveView</a></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="248219" data-batch-url="/posts/batch_likers">
                        9
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/a-library-for-high-performance-liveview-animations/46972/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-248219" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="248219"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-last-post cat-last-post" title="Last post!"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <span class="all-loaded">— All posts loaded —</span>
</div></template></turbo-stream>