- 14
- 18 398
thelazygod
Denmark
เข้าร่วมเมื่อ 19 ก.ย. 2023
The Lazy God is an outlet of digital creativity. Exploring creative interactions and experiences.
Fluted glass effect for web with custom ThreeJS WebGL shader
Get the cloneable: try.webflow.com/thelazygod-cloneable?page=fluted-glass
Source on GitHub: github.com/the-lazy-god/tlg-fluted-glass
Twitter: justriziki
---------------------------
Fluted/rippled glass effect made with a WebGL shader in ThreeJS. You can add this to your website for free and without writing any code.
---------------------------
Time stamps
0:00 Intro
0:29 Setup canvas containers and source images
1:30 Adding the snippet
2:15 Define canvas container
2:40 Define image source elements
3:00 Preview initial setup
3:15 Duplicating canvas containers
3:50 Adding interaction modes
5:10 Set level of motion
5:30 Set number of segments
5:55 Rotate the segments
6:10 Preview customised effect
6:30 Show gradient overlay
---------------------------
Want to record videos like this? I’m using Screen Studio to record and edit professional looking videos in no time. Get the Mac app:
thelazygod.com/screenstudio
This is an affiliate link. It won’t cost more for you, but using the link will support the channel.
---------------------------
Thanks for watching! Subscribe to stay in the loop ✌️
Source on GitHub: github.com/the-lazy-god/tlg-fluted-glass
Twitter: justriziki
---------------------------
Fluted/rippled glass effect made with a WebGL shader in ThreeJS. You can add this to your website for free and without writing any code.
---------------------------
Time stamps
0:00 Intro
0:29 Setup canvas containers and source images
1:30 Adding the snippet
2:15 Define canvas container
2:40 Define image source elements
3:00 Preview initial setup
3:15 Duplicating canvas containers
3:50 Adding interaction modes
5:10 Set level of motion
5:30 Set number of segments
5:55 Rotate the segments
6:10 Preview customised effect
6:30 Show gradient overlay
---------------------------
Want to record videos like this? I’m using Screen Studio to record and edit professional looking videos in no time. Get the Mac app:
thelazygod.com/screenstudio
This is an affiliate link. It won’t cost more for you, but using the link will support the channel.
---------------------------
Thanks for watching! Subscribe to stay in the loop ✌️
มุมมอง: 598
วีดีโอ
Text outline sandwich effect in Webflow with Spline
มุมมอง 9593 หลายเดือนก่อน
Get the cloneable: try.webflow.com/thelazygod-cloneable?page=text-sandwich Twitter: justriziki I decided to call this effect a text sandwich, because that's pretty much what it is; a visual sandwiched by two layers of text. Front text with a stroke, back text with a fill. Built in Webflow with components and using a Spline scene as the visual in the middle. Time stamps 0:00 Intro 0:...
Mouse trail effect with just one line of CSS built in Webflow
มุมมอง 4674 หลายเดือนก่อน
Get the cloneable: try.webflow.com/thelazygod-cloneable?page=css-only-trails Twitter: justriziki Here's how you can create a mouse hover trailing effect in Webflow using only CSS. Want to record videos like this? I’m using Screen Studio to record and edit professional looking videos in no time. Get the Mac app: thelazygod.com/screenstudio This is an affiliate link. It won’t cost mor...
Automatic alt text for Webflow CMS images using OpenAI and Make
มุมมอง 4227 หลายเดือนก่อน
Sign up to Make: www.make.com/en/register?pc=thelazygod Watch part 1: th-cam.com/video/Y2jIZJt40z0/w-d-xo.html Twitter: justriziki Learn how to create an automation that creates alt text for images in your Webflow CMS whenever you create a new CMS item using Make.com and the OpenAI GPT 4 Turbo. Time stamps 0:00 Intro 0:22 Setup OpenAI module and create connection 2:00 Update CMS ite...
Compress Webflow CMS images automatically and free
มุมมอง 4328 หลายเดือนก่อน
Sign up to Make: www.make.com/en/register?pc=thelazygod TinyPNG API Documentation: tinypng.com/developers/reference Twitter: justriziki Learn how to create an automation that compresses images in your Webflow CMS whenever you create a new CMS item using Make.com and the TinyPNG API. Time stamps 0:00 Intro 0:26 Webflow CMS setup 0:46 Create a scenario in Make 2:55 Setup TinyPNG API c...
Styling the perfect radio button for CMS Filter in Webflow
มุมมอง 3.4K8 หลายเดือนก่อน
Cloneable: try.webflow.com/thelazygod-cloneable?page=cms-filter-all-styling CMS Filter by @Finsweet: finsweet.com/attributes/cms-filter Twitter: justriziki This video is all about styling that radio button for Finsweet CMS Filter. It is a follow up to my first video about setting up the filter that you can find here: th-cam.com/video/cMIIqZJjuOk/w-d-xo.html Time stamps 0:00 Intro an...
CMS filtering on a collection list in Webflow with an 'All' button
มุมมอง 8K9 หลายเดือนก่อน
Get the cloneable: try.webflow.com/thelazygod-cloneable?page=cms-filter-all-styling CMS Filter by @Finsweet finsweet.com/attributes/cms-filter Twitter: justriziki Learn how to filter a collection list in Webflow with dynamic filter categories from a reference field and a pre-selected 'All' radio button to reset the filter using Finsweet CMS Filter. Time stamps 0:00 Intro 0:42 Webflo...
How to make numbers count using Webflow interactions
มุมมอง 9319 หลายเดือนก่อน
Get the cloneable: try.webflow.com/thelazygod-cloneable?page=tlg-count Source on GitHub: github.com/the-lazy-god/tlg-count Documentation: thelazygod.com Twitter: justriziki Learn how you can manipulate numbers with Webflow interactions. Time stamps 0:00 Intro 0:55 Project Setup 1:26 Add attribute to numbers 2:04 Create a variable for each number 2:24 Interaction 1 - Mouse movement 3...
The quick brown fox jumps over The Lazy... God?
มุมมอง 2729 หลายเดือนก่อน
Welcome to my channel The Lazy God. Expect the unexpected, with creative or different Webflow and digital design. You can find all of my cloneables on Made in Webflow: try.webflow.com/riziki Snippets: thelazygod.com Twitter: x.com/justriziki Want to record videos like this? I’m using Screen Studio to record and edit professional looking videos in no time. Get the Mac app: thelazygod.com/screens...
WebGL kaleidoscope effect with Three.js and shaders
มุมมอง 36611 หลายเดือนก่อน
Get the cloneable: try.webflow.com/thelazygod-cloneable?page=tlg-kaleidoscope Twitter: justriziki Website: thelazygod.com Create a hypnotizing kaleidoscope effect using attributes powered by Three.js. Divided into any quantity of segments and animated with a mix of mouse movement, scroll or infinite loop. Time stamps 0:00 Intro 0:29 Setup 0:50 Copy the snippet 1:25 Define canvas con...
Go from 2D to 3D inflated text interaction with Spline and Webflow
มุมมอง 867ปีที่แล้ว
Get the cloneable: try.webflow.com/thelazygod-cloneable?page=inflated-text Remix the Spline scene: app.spline.design/community/file/36e1bc36-f911-44a1-8fb8-aa4716b82bd9 Gluten font: fonts.google.com/specimen/Gluten Twitter: justriziki Website: thelazygod.com Jazz up your site with a 3D inflated text made with Adobe Illustrator, Blender, Spline, and Webflow! Go from 2D to 3D with thi...
How to animate a video with native Webflow interactions
มุมมอง 1.3Kปีที่แล้ว
Get the cloneable: try.webflow.com/thelazygod-cloneable?page=tlg-video-control Source on GitHub: github.com/the-lazy-god/tlg-video-control Documentation: thelazygod.com Twitter: justriziki Learn how you can animate background videos in Webflow using native interactions. Axe the crazy lottie files with image sequences, just add the snippet, apply the attributes, create the variables ...
Thank you !!!! I was struggling using the clear option as radio button and getting the active state right! Your trick is just the best !🙂
Very helpful, especially with the clone...Thank you!
Hey bro, what if my filter options are checkboxes instead of radio buttons, how would i make the all button deselect all others and be deselected when any of the others are selected.
Normally you wouldn't have an 'All' button for a checkbox based filter. Instead it can make sense to add a reset/clear button which clears all filters or just the specific filter category. You can use [fs-cmsfilter-element="clear"] to clear all filters or [fs-cmsfilter-clear="IDENTIFIER"] to clear/deselect all checkboxes in a specific filter category.
Thanks, man, I watched both of your tutorials about CMS filtering & styling. I found them as a GEM. The most tricky tutorial I have ever seen.
Brother, that's Wow 🤯🤯. You've saved me a ton of hours. Subscribed you, keep it up! 🤝
when i change the text size of active class of radio buttton it applied on other all buttons .. my combo class name is correct and the active button bg working fine only it happened with the size of text any help ?
Great video!, please make an tutorial on how you make the grid and boxes, its a so good style!!🔥
Hey there! Could you help me with the CMS collections set up? Like you have two lists, one game level with all the projects/games and one themes which is essentially the filtering - how do i set this up? As they both essentially contain the same items right
Hey! The two collections don’t contain the same items, but one is referencing the other. In my example, the first collection “game levels” has one item for each level, and these have a reference field that reference the second collection. The second collection is “themes” and contains one item for each theme (e.g. fire, water, air etc.). Of course the first collection could be “blog posts” and the second could be “topics” or whatever fits your needs.
awesome, thank you! any idea on how to make the radios wrap on mobile? since all is separate, the remaining radios dont align to the same axis on the left.
I solved it by wrapping the "All" radio field and the collection list in a flex container with wrapping enabled. Then I added the following code to the page as an embed: <style> #filters-form .w-dyn-list, #filters-form .w-dyn-items { display: contents; } </style> This allows the child elements of .w-dyn-list and .w-dyn-items to participate directly in the flex container layout. #filters-form is the ID of my form containing the filters.
@@naeo thanks so much!! this worked like a charm.
@Honeydesigns00 Great! 😀
Hey mate, I need to create a slightly more advanced filter, that will give you a second set of options based on your first selection. Is that possible using Finsweet? EG: You select a make of a vehicle, then have options appear to select the model. Upon selecting the model the content appears.
This is so smart! I was struggling for ages. Thank you <3
Epic videos, learned so much, thank you
Great tutorial, thank you! On mobile there is a strange bug/glitch when switching tabs where the text that is inside the collection items flashes. I applied the tutorial to my project and this happens. But this also happens in your clonable. Do you already noticed it and do you have a solution for this?
Thank you for the kind words! CMS Filter has a 100ms fade transition by default. If you want it to be instant you can add fs-cmsfilter-duration = "0" as custom attribute on the list.
Awesome Bro, You rocked 🔥
Glad you found it helpful! 🔥
Is it also possible to select multiple categories at the same time, with checkboxes for example? And reset with the 'All' button?
Yeah you can do that. The setup is almost the same, but instead of radio buttons you would use checkboxes, since they allow multiple to be selected at the same time. Then I would probably just add a button called reset instead of the “all”. Finsweet has a specific attribute you can add on an element to define that it should reset the filter.
Thank you! Is there a way to have more than one category / theme assigned to a project?
Yeah, the same approach works for that. Then you would use a multi-reference field in the collection for the categories. And inside of each collection item on the page you would nest another collection list to show all categories which have been selected.
How to use it on wordpress?
I haven't really tried, but you essentially just need to be able to apply custom attributes to specific elements and then have the structure as below with an image inside of a div. <div tlg-fluted-glass-canvas> <img tlg-fluted-glass-image src="path-to-your-image.jpg"> </div>
LIFE SAVER! Thank you very much!
Thanks for this awesome tutorial! 🎉 The way you explained how to animate background videos with native Webflow interactions is super clear and practical. I love that you found a solution without relying on Lottie files or image sequences - using variables and interactions makes everything much more efficient! 👏 I’ll definitely try this out on my next project, especially the scroll-based interactions. Sharing the snippet and source code is incredibly helpful! Looking forward to more content - keep it up! 🚀
Wonderful tutorial! This is exactly what I was looking for; however, I have one (potentially dumb) question. When I got the cloneable, none of the filter buttons worked. The hover animations all respond, but I can't get the images to filter by using the buttons. Is that normal for a cloneable? I just want to make sure I won't have the same problem if I try to implement this workaround on my own site. Thank you again!
It should all be working in the cloneable you get exactly like the one you can see here cms-filter-all-styling.webflow.io/. Feel free to share a link or send me a DM on Twitter @justriziki if you want me to take a look 👀
Благодарю! Мне очень помогло! Буду смотреть тебе дальше!
Awesome. Do you know if this can be applied with Framer sites?
I believe that it shouldn’t be an issue to use this in Framer. You just need to be able to add attributes to elements and set up the basic structure of a box (div) with an image inside such as: <div tlg-fluted-glass-canvas> <img tlg-fluted-glass-image> </div>
Very nice dude! Thanks!!
Oooeh love the effect hope I'll land a project in which this effect fits
This is great thank you! Is there a way to have a mouse interaction that scales the effect up and down from 0 so if mouse is all the way left on image it’s normal and as mouse goes right the effect turns on and gets more intense?
Thanks! I haven’t built that interaction into the shader, but may look into this in the future 🤔 At the moment you could create an interaction which changes the opacity of the entire canvas container on hover or mouse movement.
This is great thanks! The one thing I cant get to work is the ''All'' button. Please help :) what is the trick to that
Thanks! I explain how to set up the all button in my other video here: th-cam.com/video/cMIIqZJjuOk/w-d-xo.html Pay attention from around 3:58, that's when I set it up.
@@thelazygod aah legend! I actually figured out the same hack after my previous comment
Really awesome. Was searching for this a long time :)
Thanks! I've also been working on this for a very long time ✨
Very awesome ! So juge effect, i love it thanks for your explanations
Thanks! I'm glad you like it 🔥
Hey thelazygod, again super helpful tutorial! Is it possible to link to these tabs? E.g. on the Home Page I show a preview of projects with these tags and if I click on a tag -> Can it take me to the Projects list with the tab already chosen?
Thanks! Yeah, if you enable the “show query” option on your CMS Filter you can link to the page with the projects list with the filter set through queries in the URL e.g. ?category=Fire. You can read more in the “show query” option on Finsweet’s website: finsweet.com/attributes/cms-filter
So nice, thank you
Thanks for your tutorial ! i really like it
Glad you like it!
I will be adding this to my website, painful is that I had to switch from webflow to Framer. But I'm still adding it.
Cool! Should also be possible in Framer
I love this effect and even designed a landing section with it in mind. However, when I finally switched to a paid plan and got the embedded code feature I cannot for the life of me make it work. I have no idea what's going on. More so, I used to do a lot of CSS code animations from scratch so it's not that I'm totally incompetent but I'm definitely starting to feel that way after troubleshooting an effect created in a 2-min video for half an hour. Am I missing something? Did this get patched in the very short amount of time that has passed since this video came out? Absolutely not your fault but just wondering if anyone has ran into any kind of problems during implementation?
Appreciate your support! This effect is based purely on CSS so is not likely to have changed behaviour since the release of the video. But one thing which could cause this is effect to not work is z-index, and overlapping elements. If you have text (or other elements) in the same section they may obscure the boxes, which have the effect, causing the hover state to not work. That’s definitely something I would check out. Regardless you’re also welcome to send a DM on Twitter (@justriziki) and I’ll take a look ✌
Great tutorial! The effect is eye-catching and your explanations are very easy to follow.
Does it work with pagination?
Yeah you can combine it with Finsweet’s CMS Load attribute for your choice of pagination mode
Such a nice and simple effect! Will definitely play around with this. Thanks for the video :)
Nice, thank you very much! Just what I was looking for!
Great tutorial! Your explanaitions are very clear. I have an issue with the "All" button, it's not funcioning. When I click it, it shows nothing. What can I be doing wrong?
It sounds like the filter can't find the hidden 'All' text in the collection items. You can check if it is added in the collection item. It may be case-sensitive, so you can also check if the 'All' text is written in the same way. It could also be the IDENTIFIER in the [fs-cmsfilter-field="IDENTIFIER"] attributes which are not matching between the filter elements and the text 'All' text in the collection item.
Great tutorial and managed to get filtering working without too much trouble. One question: The refresh of the list every time a filter is applied is visually quite brutal. Is there some form of transition which could be applied to say, fade in the filtered list when a filter is applied? I have no idea how this might be done if it's at all possible. Thanks
Thank you! Finsweet has created an [fs-cmsfilter-duration] attribute you can add on the list element to set the duration of the fade in ms. The default is 100, so you can try increasing that number. You can read more about this on their site finsweet.com/attributes/cms-filter
Wow, amazing video. Really great. Hats off you for explained a big thing in a simple shorter video 👏🥰😇
Thank you so much 😄 Appreciate the support! 🙏
Excellent tutorial. Thank you!
Great video! Super clear to understand. Very helpful. Hope you keep putting out content!
Thank you, sir.
Your so helpful and great keep up the good work!!
Thank you, that means a lot! I'll soon have some more stuff coming 🔥
Amazing
Nice work!
Amazing man
Amazing solution! Will be trying it out :)
Man , You are awesome. I love so much this effect, i am thinking to built that for a background with the same fade effect on border in a Hero section. I dont know if that the same principle if you understand me but i think it is. So Thank , I love you small tricks on webflow
Hello thelazygod, thank you so much for this video! This saved my client project. I now added multiple tags to each project and now the "All" button doesn't work anymore. Do you now why this might happen?
Glad you liked it! Hard to say without checking the page, but I'd suggest to check the attributes are referring to the same 'field identifier', and make sure the radio buttons are in the same group.