Thanks Armin, have emailed!
To clarify, the issue is when you try and navigate to "Contact" from within a project.
Both projects and "contact" are overlays and the stagger fade transition is causing the content not to load at all in this sequence.
Hope that makes sense, thanks again!
@arminunruh - upon further testing, it's related to the "showing transition" when navigating.
Specifically the "stagger fade" option - the "fade" option works.
I have switched off this transition and the page content now loads.
Is there anything we can do to bring back the stagger fade and avoid the bug with disappearing content? Seems like something in the latest update has affected how these transitions work?
There were no issues previously, and it looked super nice...
Thanks for your help!
@arminunruh update on this - the overlay is actually loading SOME content, it's just the rows which are further down the page (below the fold).
Very odd - I can't work out why those rows are loading and not the others?
Hi Armin,
My "contact" page (which opens as an overlay) used to load fine when navigating to it from within one of my projects (which are also overlays).
However now it won't load when doing this - the ability to navigate from one overlay to another has gone.
Do you have any idea why this is, and how I could fix it / return to how it was?
Test by opening a project and then clicking "Contact" nav button.
https://primaryworks.com.au/
Thank you!
@arminunruh the image hover issue has been fixed - thanks for that!
I'll test the opacity / overlay loading thing soon too.
Cheers!
It's working again - thanks!
Thanks Armin. I already asked ChatGPT and it gave me this code, which works - the attributes are inserted within the <SVG id> section. Changed it using textedit.
Hope that helps anyone exporting from Illustrator, as most of us probably are?
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52">
<defs>
<style>
.cls-1{fill:#606060;opacity:.5;}
.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:.67px;}
</style>
</defs>
<rect class="cls-1" width="52" height="52" rx="4" ry="4"/>
<polyline class="cls-2" points="22.87 17.06 31.81 26 22.87 34.94"/>
</svg>
Fixed!
Thanks Armin :)
Update on this - it seems like any element that previously had the new "Opacity" effect applied to it is now suffering from this flashing upon loading, even when the effect has been removed. The only way I can fix it is by deleting the element and replacing it with a new version.
Would be great to fix this bug, as the ability to set the opacity is super helpful, I've been doing it by setting classes but there's a delay between the page load and the class being applied - doesn't look too bad but isn't ideal.
Thanks!
Hey @arminunruh thanks for your help so far,
All was working nearly perfectly with my overlays but after the recent update, my "Contact" page is now showing a "flash" of the content when it loads, rather than smoothly appearing.
https://primaryworks.com.au/
(Click the read more or Contact button)
It's weird because my other overlays don't do this, even though as far as I can see there's no difference in the way they are set up or any strange code differences.
I did have some opacity effects on the contact page which were causing a similar thing to happen, I've removed them and it was all good but now the problem has returned.
Any insight you might have would be super, thank you!
@arminunruh thanks, I tried inserting that but it didn't work - whereabouts would you place it in the string of code? Not sure if there's something I'm missing...
@arminunruh thank you!
Yes, the first thing you said is correct - disabled links are displaying the hover image of the nearest active link, instead of their own hover image, or no image at all.
For now I used CSS to disable the hover completely for the disabled links.
But what I'd love is to see the correct hover image (as a sneak preview) for them, without them being clickable (or showing the google link preview).
I also couldn't work out how to target the "on scroll" image for mobile, as this had the same problem, so switched those off altogether. Any ideas there?
Hope that makes sense!
@arminunruh thanks, would be great to get sorted :)
I've removed the mobile interaction for now.
Desktop has a few kinks but works fine 90% of the time for me.
I'm having issues with this too. Instagram seems to ignore the overlay and just opens projects as a page without the close button or other overlay styling (mine have a transparent blurred BG). However I can open each project individually without issues.
Hi Armin,
Thanks for the "disable link" feature for projectindex and thumb grids.
That's really handy for creating "coming soon" projects.
Encountered an issue though, which is when this is used for the index, the hoverimage from the adjacent active link is used which makes it look wrong, see here https://primaryworks.com.au/index/
Ideally here, there'd be an option to "hide" or "show" the thumbnail in addition to disabling the link.
That would be really amazing.
In my case I want all the thumbnails to show but only certain projects to link through.
Hope that makes sense,
Hello @arminunruh , I'm struggling with this also.
I have uploaded custom "prev / next" buttons for my carousel (via the lay theme options). The SVG code looks like this:
<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"><defs><style>.cls-1{fill:#606060;opacity:.5;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:.67px;}</style></defs><rect class="cls-1" width="52" height="52" rx="4" ry="4"/><polyline class="cls-2" points="22.87 17.06 31.81 26 22.87 34.94"/></svg>
The width and height (52px) are included in the code (from illustrator) but the buttons don't show up.
If you can let me know how to fix that would be amazing!
Thank you,
Hi Armin,
I'm running into an issue when using anchor links within an overlay project.
I have a "read more" link that jumps you down to the project text.
Works fine on desktop - here's the test page: https://primaryworks.com.au/south-east-centre-for-contemporary-art/
However, on mobile any scrolling of the main website results in the anchor jumping too far down the page, past the point specified via the lay options. It seems that the overlay is responding to the scrolling that's happening behind it somehow.
Can't quite work out how to fix, any help greatly appreciated!
Best,
Thanks @arminunruh, that worked a treat :)
Thanks @arminunruh , the CSS targeting the overlay did the trick, although it's not super smooth it's a big improvement!
I'm sure there's a way to fine tune it with JS but that's probably beyond my skill level.
Many thanks!