issue with flicker

[donbowman]

I have done an integration to Wordpress, https://github.com/donbowman/wp-trig-js.

Its functioning ok, but, I find there is a lot of flicker on the blocks. E.g. as I scroll down, before they start animating, they flicker rapidly, which is very distracting.

Any suggestion what I might have wrong or how to resolve? Attached is a video showing. The block in question is:

<div class="wp-block-group trig-grow-up-right enable-trig trig-target is-vertical is-content-justification-center is-layout-flex wp-container-core-group-is-layout-ce155fab wp-block-group-is-layout-flex trig trig-down" style="--trig-blend:ease;--trig-direction:normal backwards">
<figure data-wp-context="{&quot;imageId&quot;:&quot;683b62a7d6ddd&quot;}" data-wp-interactive="core/image" class="wp-block-image size-full is-resized wp-lightbox-container"><img decoding="async" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on-async--click="actions.showLightbox" data-wp-on-async--load="callbacks.setButtonStyles" data-wp-on-async-window--resize="callbacks.setButtonStyles" src="https://www.agilicus.com/www/40c531ca-01.svg" alt="01" class="wp-image-2041917" style="width:64px" title="Managed Industrial Remote Access 4"><button class="lightbox-trigger" type="button" aria-haspopup="dialog" aria-label="Enlarge" data-wp-init="callbacks.initTriggerButton" data-wp-on-async--click="actions.showLightbox" data-wp-style--right="state.imageButtonRight" data-wp-style--top="state.imageButtonTop" style="right: 230px; top: 16px;">
			<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
				<path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z"></path>
			</svg>
		</button></figure>



<p class="has-mid-large-font-size" style="font-style:normal;font-weight:600">Unified Authentication</p>



<p>Each of the constituents expressed a desire, or a hard-requirement, to use their existing corporate identity (regardless of company).</p>



<p>This simplifies multi-factor, simplifies audit, and, simplifies user life-cycle management.</p>
</div>

out.mp4

This is the page https://www.agilicus.com/case-studies/managed-industrial-remote-access/ i was modifying to try.

[iDev-Games]

Hi,

Is this issue happening in a specific browser or all browsers you've tested?

I have recently realised an issued when I added the trig-animations.css with flickering (not quite sure if it looked the same or not).

I believe the issue was to do with this:

.trig{ --trig-delay:0s; --trig-duration:1s; --trig-blend:ease-out; --trig-direction:normal backwards; position:relative; }

Which is in the trig-animations.css file. I think the position relative was breaking my animations though.

Do you have any issues running this page?
https://idev-games.github.io/Trig-JS/animations.html

Thanks

[donbowman]

i don't see flicker issues on your demo page.

I just tried in chrome 137 on wayland, not other browsers.

[iDev-Games]

Are you able to make the changes again or an example I can check the CSS. I'm guessing some conflicting CSS must be causing it. It should be fine on chrome.

Thanks

[donbowman]

attached is a static html file that shows. ignore all the missing links etc, i don't think they hurt it. I just used the cdn css/js for trig.js

If you scroll down a bit there is a white box in the left that will show. It also shows this on firefox as well as Chrome Version 137.0.7151.40 (Official Build) beta (64-bit)

l.zip

the div in question:

<div class="wp-block-group has-primary-color has-base-background-color has-text-color has-background has-link-color  trig-grow-up enable-trig trig-target wp-elements-f034fd01f6508ddc34edd891f400e895 wp-container-content-04527959 has-global-padding is-layout-constrained wp-container-core-group-is-layout-7847769f wp-block-group-is-layout-constrained" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30);--trig-duration:500ms;--trig-blend:ease;--trig-direction:normal backwards">

[donbowman]

Attached is the captured video

out.mp4

[iDev-Games]

Ok, I think I can see what is happening. The grow animations uses transform scale. As the element position is used for triggering, as you scroll onto the element it is doing what it should do and scale it down. When that happens the element is no longer visible and reverts back to the initial state which causes the flickering as it keeps trying as the initial state puts it back visible on screen.

What should work is wrapping it in a container:

<!-- Create container div -->
<div id="containerDiv" class="trig-grow-up enable-trig">

<!-- Create inner div -->
<div id="innerDiv" class="trig-target">
content
</div>

</div>

This way when the container div scrolls on to the screen the size of the container stays exactly as is. However the inner div is then scaled correctly and stops the flickering.

I don't think this should be an issue for other animations in trig-animations.css only the ones that use scale.

Thanks

[donbowman]

OK that improves it a lot, but it still has some flicker. Attached with the change to add an outer div (this will be quite complex in wordpress, i will have to rewrite the plug I did :( )
It now only flickers a couple of times as it scrolls into view. Its not as easy to capture since the screen capture is low frame rate.

l.zip

out1.mp4

[iDev-Games]

The issue is the trig-target is full size until scrolls into view. Which gives it a split second of visibility.

To fix this I set:

.trig-grow-up .trig-target, .trig-grow-up.trig-target {
    display: inline-block;
    /* adding scale 0 makes sure the element is already small. before visible */
    transform: scale(0);
}

Then I changed --trig-direction: normal backwards; to --trig-direction: normal forwards;

I'm wondering if this is an issue on the documentation too but due to the text being in the middle of the element, it has more time off screen making it far less noticeable.

Let me know if this fixes your issue. I may need to patch the way trig-animations.css works.

Thanks