Lay Theme Forum

Hey!
I guess because your regular page is not longer than the screen and your scrolling on the overlay page doesn't trigger the scrolling on the regular page, the adress bar won't dissappear. Maybe try to untick the box "Disable scrolling of website when overlay is opened (recommended)" on the page with the overlay function. It's located under the "Other" tab in the overlay settings for the according page.

Maybe this helps.
PS nice site!

@arminunruh do you figure how it is affected by the update? In the new laytheme version I can't get the bezier easing function running anymore :( before it worked so well.

@arminunruh I feel like slow frame rate and slower than before. As if the animation is stretched out.

I restored the old laythem version (6.5.3) and this is how the transition looked originally (very smooth and nice easing): https://www.dropbox.com/scl/fi/tkbpwh1wyvl47urfkmx4j/before-update-800ms.mov?rlkey=66l1wrxaglv85vfxm2nmecymy&dl=0

For comparison here's how it looked after the update to version 6.7.8:
https://www.dropbox.com/scl/fi/595bn1yghywvo2f8w8qzh/after-update-800ms.mov?rlkey=2u7ek28qce8yevdlaae2mrvp3&dl=0

I then reduced the time to 300ms to see if it's just running to slow, but the framerate and easing still looked very off: https://www.dropbox.com/scl/fi/uncb0tf7guamz9i7y4xmj/after-update-200ms.mov?rlkey=ch62exnfpstjp2a6e6h2xvkce&dl=0

Hope this helps. I'll keep laytheme on the old version for now :)
Cheers,
Felix

Hey,

I figured my transitions stopped working properly since the last update. They look very choppy and "unnatural", also having the feeling taking longer than the time I have set.

https://www.felixfinger.de

I use the staggerUp (transition in) and staggerDown (transition hide) with 800ms and for the easing the function 'cubicBezier(.5, 0, 0, 1)'. This looked very smooth before and now looks kind of crappy. I also tried it in different browsers like safari (recent version) and chrome (recent version). Any idea what's wrong here?

Cheers

yeah glad I could help! :) Have fun

Hey!
have you built the navigation in the gridder? If so just give the row that contains the post-it navigation a class or ID (right click "set HTML class and ID") and add to the css something like:

.example-class {
position: fixed;
width: 100%;
height: auto;
top: 0;
}

Maybe that helps already :)
Cheers

Hi,

I was wondering if the revealing transitions can be turned of manually for certain elements like with the "no-animation" class for on scroll transitions? I have the issue that I have fixed position elements on the page that are flickering, because they are scrollable at first and then get to their fixed position just after the revealing animation was fired.

Here's a screencast to illustrate. When I refresh and scroll the page the elements move and get revealed and then jump back to their fixed position:
https://www.dropbox.com/scl/fi/9jt5fvhl1i586iayht1tq/Lay-Theme-Forum.mov?rlkey=pxetc7tpfy1lntab1y2ze2luz&dl=0

Would be grateful for any hint if this is somehow possible:)

cheers
felix

@locolor Hey yes that should work. You just need to add the shortcode with the youtube or vimeo link like this to a row anywhere on the page

[wp-video-popup video="https://www.youtube.com/watch?v=YlUKcNNmywk"]

and then hide the row via css like with display:none;
Then the element you want to be the trigger needs to have the class "wp-video-popup", so like

<a href="#" class="wp-video-popup">Play Video</a>

If you want to trigger multiple video pop ups you need the pro version though. There's a good documentation here on the plugin's page: https://de.wordpress.org/plugins/responsive-youtube-vimeo-popup/#description

Cheers
Felix

@CK seems to be the Google tanslate plugin which is adding this element. When you uninstall / disable the plugin it will disappear. I don't see it in my Google browser, since I don't have the plugin installed.

https://support.google.com/blogger/thread/96410597/what-is-this-html-code-for?hl=en

Cheers,
Felix

@locolor Hey ! I just used the plugin WP Video Popup (https://wp-video-popup.com) for a recent project and it seems to work perfectly. I added a row where I put the shortcode and was hiding it via css.

hope this helps :)

@arminunruh Thanks for the tip. You're right, the issue was caused by the plugin "WP Fastest Cache". I'll keep it deactivated for now, maybe you've got an idea why this is. I think you recommended this plugin for performance improvement :) Otherwise I'll just try another cache plugin.

Cheers,
Felix

Hello,

I just realized that images would not be vertically centered correctly in rows that have browser height. In Safari everything works fine but in Chrome and Firefox the images move to the top. I already turned of custom code plugins, which didn't help. Any idea if this is a general problem or just on my page?

I added screenshots to illustrate the issue and here's the example page with the according element: https://www.felixfinger.de/optimallyme-visuelle-identitaet/

Laytheme view:

Chrome view:

Ok I just figured it out myself. For everyone having the same issue: I haven't loaded the lottie web framework, but only the lottie player. So far I only embedded lottie animations via the player and didn't know I need the framework :)

So you just need to load the web framework instead of the player in your "Custom CSS & HTML" -> "Custom <head> content" Tab:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.1/lottie.min.js"></script>

Cheers!

Hey laythemers,

I just tried to work with GSAP framework and the Scrolltrigger plugin and it works fine so far.
But I fail to run a lottie animation with the Scrolltrigger plugin.

GSAP Docs provide a little helper function for this, which I used:

function LottieScrollTrigger(vars) {
    let playhead = { frame: 0 },
        target = gsap.utils.toArray(vars.target)[0],
        speeds = { slow: "+=2000", medium: "+=1000", fast: "+=500" },
        st = { trigger: target, pin: true, start: "top top", end: speeds[vars.speed] || "+=1000", scrub: 1 },
        ctx = gsap.context && gsap.context(),
        animation = lottie.loadAnimation({
            container: target,
            renderer: vars.renderer || "svg",
            loop: false,
            autoplay: false,
            path: vars.path,
            rendererSettings: vars.rendererSettings || { preserveAspectRatio: 'xMidYMid slice' }
        });
    for (let p in vars) { // let users override the ScrollTrigger defaults
        st[p] = vars[p];
    }
    animation.addEventListener("DOMLoaded", function () {
        let createTween = function () {
            animation.frameTween = gsap.to(playhead, {
                frame: animation.totalFrames - 1,
                ease: "none",
                onUpdate: () => animation.goToAndStop(playhead.frame, true),
                scrollTrigger: st
            });
            return () => animation.destroy && animation.destroy();
        };
        ctx && ctx.add ? ctx.add(createTween) : createTween();
        // in case there are any other ScrollTriggers on the page and the loading of this Lottie asset caused layout changes
        ScrollTrigger.sort();
        ScrollTrigger.refresh();
    });
    return animation;
}

I deactivated lazyloading, all kind of transition, and activated compatibility mode. I think it has something to do with the addEventListener "DOMloaded"? But I can't get my head around this. Anybody a hint to solve this?

Cheers
Felix

@arminunruh
Some posts are just supposed to reference to external pages instead of going to an actual subpage with content, that's why I use this plugin.

In the meantime I figured that the plugin isn't able to add certain attributes like the target="_blank" to the link, when the laytheme page is loaded a second time. I just force to re-add these attributes by jquery, this is a kind of dirty solution I think .. but it works for now :)

Not sure if there's a general demand for this feature, but I already had several cases when it would have been great to have the option to make:

• projects only showing thumbnails (without link)
• blog posts linking to external URLs

Cheers Armin!

Hi,

I'm using the plugin "Page Links To" to convert Blog Posts into URLs and this almost works. The only problem is, that the URLs just work the first time I visit the page. If I go to another page and then go back to the news section, the URLs would stop working. Do somebody has got an idea why that is?

EDIT: It has something to do with the page transitions/Ajax. When I run the page in compatibility mode, the bug disappears.

http://spp-architekten.com/aktuelles/

Using laytheme 4.8.5 and Wordpress 6.1 in Safari 15.3

Hi,

I use Safari 15.3 and the gridder flickers when resizing elements. There are no downsides on the functionality though but maybe it's an easy fix :) I have laytheme on V. 4.4.8

https://www.veed.io/view/3b0ca698-f4e6-4190-9686-0129b1878c0c

cheers

Hey!

I frequently have troubles with creating projects, that are supposed to have only a thumbnail and no extra subpage to link to. When creating a "thumbnail only" project, the thumbnail-grid and index module is always linking on an empty page. I found a (rather messy) workaround to remove the links of these projects, but maybe that's an interesting (and easy) new function for laytheme in the future :)

Keep up the good work
Felix

Hey Richard,

ok today I can't recreate the bug either! Maybe it was an issue with Cache or my hosting service. Sorry for bothering and thanks for the quick response anyway, perfect support as always :)

Cheers
Felix