This week we included the new App Connect Browser Control in Wappler. Using it you can track scroll position and in combination with the dynamic attributes, you can animate positions, opacity or other attributes of the elements on your page:
In this example we added a page scroll animation which animates the titles in the header horizontally and changes their opacity as we scroll down the page.
Hi Any tutorial to do this?? Or whats the expression that I need to use that on top of the page is 0% width and on the bottom is 100%??
I have tried like this.
I get opacity work but the width only get 0px. Any help??
Also tried this
No success.
First add the Browser component, then play around with opacity and position as in
<div is="dmx-browser" id="browser1"></div>
<header class="d-flex align-items-center" style="height: 500px">
<div class="container">
<div class="row">
<div class="col">
<h1 dmx-style:transform="translateX(-{{browser1.scrollY.offset}}px)" dmx-style:opacity="(1-browser1.scrollY.position*2)">Travel</h1>
<h1 dmx-style:transform="translateX({{browser1.scrollY.offset}}px)" dmx-style:opacity="(1-browser1.scrollY.position*2)">The world</h1>
</div>
</div>
</div>
<span class="cover" dmx-style:opacity="browser1.scrollY.position+1.2"></span>
</header>
<section style="height: 1000px;"></section>
Assuming that for change the width from 0% to 100% use the same expression ??
I got this working Thanks a lot @ben
dmx-style:width="{{browsercontrol.scrollY.position*100}}%"