- 7
- 6 059
heiko dietze
Приєднався 27 лис 2022
Hey! 👋 This channel is dedicated to helping developers (and especially Bricksbuilder users) with simple workarounds and tricks. Following the motto of the founder of CCS Tricks: "Write the article or make the video you wish you had found when you googled something".
I'm not a senior dev, but I've built a few sites along the way with my agency. And the things I learned will hopefully help you when you need it. 👍🏻
I'm not a senior dev, but I've built a few sites along the way with my agency. And the things I learned will hopefully help you when you need it. 👍🏻
How I set up Horizontal Scroll in 5 minutes with GSAP & Bricksbuilder – no code needed
Hey guys - good news: Building a page with horizontal scroll is now possible for you without any code! 🥳 By watching this video, you'll learn how to do it in less than 5 minutes (no joke!). We will just use Bricksbuilder and Bricksforge's animation panel (with its UI for GSAP). And we'll use a typical use case: vertical scrolling, then switching to horizontal and back to vertical. Have fun checking it out and start making the Internet a better place with your stunning websites! 👍🏻
*Table of contents:*
0:00 Intro
0:34 Step 1 - Setting up the structure in Bricksbuilder
2:03 Step 2 - Configuring the GSAP Timelines in the Bricksforge Panel
5:03 Horizontal Scroll already works
5:52 How to adjust the horizontal scrolling speed
7:23 Is it responsive?
08:00 Conclusion
Here's the link to the files: ⬇️ heikodietze.gumroad.com/l/horizontalscroll
#bricksbuilder #gsap #gsapanimation #bricksforge
*Table of contents:*
0:00 Intro
0:34 Step 1 - Setting up the structure in Bricksbuilder
2:03 Step 2 - Configuring the GSAP Timelines in the Bricksforge Panel
5:03 Horizontal Scroll already works
5:52 How to adjust the horizontal scrolling speed
7:23 Is it responsive?
08:00 Conclusion
Here's the link to the files: ⬇️ heikodietze.gumroad.com/l/horizontalscroll
#bricksbuilder #gsap #gsapanimation #bricksforge
Переглядів: 887
Відео
How I use the Stagger Text Effect with Bricksbuilder
Переглядів 1,2 тис.3 місяці тому
Hey folks - in this video I show you how to use this fascinating Stagger text effect with Bricksbuilder and Bricksforge, but without any code! And: on many elements of a website with one class (okay: 2 classes in this case 😅). Have fun and make the internet a better place with your animations! 👍🏻 Table of contents: 1:07 Step 1 - Animating the hero headline with the stagger effect (characters) 5...
Awesome Text Reveal Effect on Scroll with Bricksbuilder
Переглядів 9825 місяців тому
Hey guys, check out how to pull off this awesome text reveal effect on scroll (no code necessary!) 🥳 Table of Contents: 00:00 - Intro & Hint for Shortcut 00:47 - Step 1 - Our Setup 01:26 - Step 2 - The White and the Dark Text 02:26 - Step 3 - The Pinning of the Section 04:48 - Step 4 - Setup the Animation 06:06 - Step 5 - Setting up Split Text & Stagger 07:49 - Setp 6 - Correcting the Character...
Background Colour Change on Page scroll - Bricksbuilder
Переглядів 1,6 тис.6 місяців тому
Hey guys, this is the easy no-code way to change the background color when scrolling! 🎨⬇️🖱️ 00:00 - Intro 01:04 - Step 1 - Our Setup 01:50 - Step 2 - Our Trigger-IDs 02:19 - Step 3 - Our Classes 03:19 - Step 4 - Setup the Animation 06:04 - Step 5 - Edit the Timeline 07:12 - Setp 6 - Checkout the Animation 08:08 - Step 7 - Check the Frontend 09:47 - Step 8 - Connect to Mouse Scroll 10:45 - Step ...
Perfect anchor scrolling: Eliminate overlaps with Scroll Margin Top!
Переглядів 6058 місяців тому
🚀 In this quick and practical tutorial, discover how to solve one of the most annoying issues in web design - overlapping sticky headers when you scroll to an anchor tag. No more hidden content! ✅ What You'll Learn: - The essentials of `scroll-margin-top` property and why it's crucial for modern web design. - Step-by-step guide on implementing `scroll-margin-top` with Bricksbuilder to perfect y...
How to make cards responsive in Elementor from Figma layout
Переглядів 125Рік тому
#wordpress #elementor #figma #cards #design #developer #responsive In 2 easy steps you learn how to make cards responsive in Elementor. And you'll also understand how to do this pixel-perfect from a Figma grid layout (Part 2 of the series)! 🙋🏼♂️ Become a web dev that clients and designers love to hire. 👍🏻 ▶️ Chapters 00:00 Intro: What you will learn 00:20 How to make cards responsive according...
How to create cards in Elementor from a Figma grid layout
Переглядів 685Рік тому
#wordpress #elementor #figma #cards #design #developer 🏃🏽♂️Imagine: In 20 minutes from now you can design a professional looking card in Elementor. Even built from a grid layout in Figma! 🙋🏼♂️ Sounds interesting? Let me show you how to do that and become a web dev that designers love to hire. 👍🏻 ▶️ Chapters 00:00 Intro: What you will learn 00:19 What many developers can't do perfectly 00:47 5...
👍
POTENTIAL INTERACTION WITH LENIS?! Great tutorial, really! However, I can't for the life of me make this work on mobile. I did add #trigger-section to pin, but it didn't change anything. It seems to me that the scroll trigger is completely wack, and I am not sure why.
Thank you very much! 🙏 happy that it helped you. As for mobile: do you have Lenis running too?
@@heikodietze I do! I tried disabling it, though, and the effects still don't work for me for some reason
Amazing video, thank you for making this! Is there a way to add scroll snap to this so each mouse scroll snaps to the next section? I've been trying to achieve this for weeks with motion page with no luck. Thanks again, great video.
Hi Joseph - thank you very much for your compliment! Very much appreciated. 🙏 I'll think about your scenario and should I find a solution I'll let you know!
@@heikodietze Thank you!
Hi Joseph - I have checked it out. The snap functionality GSAP provides is not what you and me want. A while after you scroll, the snap sets in, not directly. The result is irritating - you think there is no snap in place. GSAP admits that in its forum. A hack is only doable with some JS code. I tried a hack myself without code, but couldn't figure it out until now. So: atm we have no easy way to do work with this very useful and needed function. 😬
Thanks for this tutorial! It's amazing. Would you know how to horizontal scroll elements inside a container that would overflow 100vw? For instance, I was trying to create like a team members carousel but instead of having navigation arrows I wanted to horizontal scroll them. But I could not achieve the effect because the pin would stop where I wanted in different screens or devices, do you think it would be possible to make a tutorial or explain to me? Thank you so much for taking the time to make this awesome material. Best wishes!
Hi @alvaromoodhouse2042 - thanks so much for your words! 🙏🏻 I would have to try out your scenario too. If I can find the time in the next few days, I will.
Hi Alvaro - I found the solution and try to make a shorter video about it. 👍🏻
@@heikodietze Wow! Thanks man!!!! That's awesome!!!
Great, Thank you!
Glad you liked it! 👍🏻
Would love to see a tutorial where a fixed navigation (like a sticky header or something) triggers the animation to the linked section.
Sounds interesting, idea noted! ✅
Awsome Tutorials! I tried importing the downloaded .json files, I noticed there are three files, can you please share how to use these files? Insert one at a time?
Hey @CowMeCow - sorry, was afc due to heavy cold. You should (and I just tried it myself to be sure) just see one Bricksbuilder template and then import it. It will then contain the 3 sections. Did this help? Thank you very much for the compliment btw! 🙏🏻
Amazing, it's really nice to see someone making content about bricksforge. I already found a way to do the horizontal scrolling but your video make things more clear so thanks a lot, just one thing, would it be possible to make a video showing how to animate elements inside this horizontal scrolling? Thanks again, and wish you a lot of success with your channel
Thank you, Omar - very happy to hear that! 🙏🏻 🥳 And your request will definitely be added to the list of upcoming videos! 👍🏻
You didn’t set up anything with GSAP & Bricks. You set it up with bricksforge! Why don’t you put in your title?
It sounds like I wasted your time with my video. If so - sorry. And good point: I'll put it in the video title next time, even if it gets very long.
Just Subscribe, be fantastic if you can. If you made a long video using all acf and bricksforge making a Recipe auto box, let's say you made a Recipe for 1 person, and there let say grams and kg different weights amount needed, I'd there wad a box to add a number let's say, 5 and it automatically x5 the information so it show x5 of the Recipe amount.
Did not fully understand you, but thank you for the comment and subscribing. 👍🏻
@@heikodietze can you make a step by step video how to make a calculator from, all the beginning ACF and bricksforged to end? without leaving nothing out, even if the video like 1 hour long, so you show all acf being build etc, i give an example, lets say you wanted to make a cake, it has different ingredients, with different amounts of grams for each ingredient need to be used to make a cake, lest say for 1 person, so if you had a box where you can put any number from 1 or 9999 it automatically changing all the below ingredients from 1 person to or 9999 so when you make a cake for how many people you need for each ingredients needed in each grams
Awesome
Thank you!
Great tutorial. You can use the class .bricks-is-frontend for the flex direction. This way the flex direction will only be applied to the frontend and not in the editor.
Great idea, @djkasperg! 👌🏻 And you mean in the custom CSS, right?
@@heikodietze Exactly
Instead of using a delay, it’s better to start the animation when the element is 200 pixels from the bottom of the viewport. You can set this up in ScrollTrigger using start: "top bottom-=200". Using a delay can cause the animation to play prematurely if the user scrolls the element just a few pixels into the viewport and then stops scrolling. Setting a specific start position ensures the animation does not being until the element is scrolled into view.
@djkasperg - Yes, awesome tip! 👏 Didn't know that this combination works! Better than my idea. Then start: "top bottom-=200" is it! 👌🏻
thank you! an awesome video.. short and educative :) please keep doing more with Bricksforge!
Big thanks for your words, @esquedm! I will try! 👍🏻
Cool short tutorial 🎉. Finally more Bricksforge Content ❤️✌️
@dynamic-homepages Thank you! 🙏🏻 happy you liked it!
is it possibe to combine with scroll snap? like when you scroll horizontally its stop on the center of container?
Nice video anw! love it!
Hi @yogibagasd - Thank you very much! 🙏 And: To achieve the effect is probably possible. Haven't tried it yet. Just not with CSS - it often conflicts with GSAP. But maybe with several timelines: one for each container. And without the scrub option. If I got time, I'll try it out.
@@heikodietze thanks, would like to know more about this! As im trying learning the gsap with BF currently
That's the shortcut - download the templates here (Bricks + Bricksforge): heikodietze.gumroad.com/l/horizontalscroll
Great tutorial. I wonder if you can make a tutorial about the panel like the events and timeline to show how to select and set up the right elements and how this work together etc.
Hi @AJ-Pixelyze - thank you very much! 🙏 a tutorial about selecting elements with the event functions is a good idea. They are powerful! I'll have your suggestion in mind. 👍🏻
yes! push this idea :) thanks!
Just what I'm looking for! thank you for this! hoping to see more bricks and bricksforge tutorials 🔥. New subscriber here.
Happy to hear that, @mugpielhoki! 😊Thank you for subscribing and a new video is out! 🚀hope you like that too!
Thank you so much for this awesome tutorial!
Hi Daniel - my pleasure! Thank you for your kind words! 🙏🏻
That was very helpful, thanks for the video.
@pepitogrande - I'm happy I could help! Thanks for the appreciation!
We need more Videos to empower Bricksforge users =) Bought it while it came out, always hat some "scraed face" while it was about animations. But the Panel and especially Videos about Animation and Bricksforge really helps me to not be "scared" anymore xD
Thank you, and I think so too! So, step by step, we will replace the fearful face with a brave look. 😁🦾
Very good tutorial, thank you very much!
Thanks a ton, Lars! 🙏🏻
Great tutorial, really easy to follow with stunning effect!
I'm very happy to hear that! Thank you! 🙏🏻
Great job!
Thanks, Philipp!
"Moves like Stagger" 🤣
That's the shortcut - download the templates here (Bricks + Bricksforge): ⬇ heikodietze.gumroad.com/l/StaggerTextEffect
Thanks for this Heiko. I had trouble getting both texts to line up as the screen sizes changed so I deleted the dark text and changed the FROM Opacity to 0.05. Is there a reason I am missing why you didn't take this approach? Looking forward to more of these!
Hey Carlos - thank you! And your idea is also a great solution - even better than mine! Thank you for sharing! 👍🏻 And btw - there is a new video if you're interested (this time more in depth about the stagger effect): ua-cam.com/video/C7-u98K2H3o/v-deo.htmlsi=ujqd_pSJKTE3jFwq
I'm sorry to hear that, Tariq. What you could do is post your HTML and css to ChatGPT and ask for debugging it. It even could work with a screenshot of the html structure from your browsers dev tools. If you haven't tried that already.
Thanks Again Heikodietze.
@@TariqKhan-wp4in my pleasure!
it did not worked in my case. I have one column sticky and containing links to the sections on the other column. the scroll-margin-top did not worked.
@TariqKhan-wp4in - Thanks for your comment! I'm sorry to hear that the scroll-margin-top property didn't work in your case. Unfortunately, it's difficult to help with such specific issues remotely. I recommend you to record a short video (e.g. with ‘Loom’) and post it in the Bricks Community forum under the ‘How to’ section with your question. That way, I and other helpful members can get an idea and probably help you further. Is that an idea?
@@heikodietze Many thanks for your valuable comment and time. actually this issue often happens with elementor and the scroll margin top does not work as usual. So I fixed it with the js code. I am posting the code here if if can help others. window.addEventListener('elementor/frontend/init', function() { elementorFrontend.hooks.addFilter( 'frontend/handlers/menu_anchor/scroll_top_distance', function(scrollTop) { return scrollTop - 253; }) })
@@TariqKhan-wp4in Great! Thanks a lot also for posting your code! 👍🏻
Nice, Can you make a tutorial about using the effect like what each thing does etc?
Hey Andrzej - many thanks! There will be another video soon that will help you understand more of the possibilities with these effects in Bricksforge.
Download my animation files and section templates (easy shortcut, all Bricksforge animations working in Bricks) for free here: heikodietze.gumroad.com/l/BackgroundColorChange
More BricksForge tutorials please
Thank you, will work on them!
Excellent, thank you.
Thank you, @laurentgarin7836! 🙏🏻
Another great one! 👌 Just shared in our Facebook group! 😊
Thank you Daniele! 🙏👍🏻
nice video!
I'm honoured, Brendan! ✨Thank you!
Just on time for a presentation of this effect to a client! I was doing it wrong. Thanks a lot!
Very happy to hear that I could help you! ☺️👍🏻
Keep it up! 🚀
Thank you! 🙏
first comment
first answer ;)
The link to the Bricks hero template and the Bricksforge animation timelines is in the description! 🥳🤠
Great video! 👏
Thank you, Daniele & Team! 🙏🏻 made possible only because of your great software!
More Bricks Forge videos!! 🎉🎉🎉
Wow, thanks a lot! I also would love to see more Bricksforge animation stuff. The possibilities with GSAP are endless and this is a great, more intuitive way to use it in your Bricks Site. Btw, I'm impressed by your pronounciation of the english language. Not the typical german accent (like myself) 🤣 Greetings from Hamburg
Thought exactly the same! 😜
@estate0007 - very happy, I could help! And thanks for the compliment. 😄 Greetings to Hamburg from Berlin!
Please more from Brickforge
Hi, nice and clean tutorial. We need much more of these bricksforge animation tutorials. Thank you. One question. on 3:31 you mention to switch on the Bricksforge "Animation Control". Why? It's a bit confusing. This is a legancy function and you don't use it.
Hi @olepoetter108 - you are absolutely right, no need to turn this on. That was a mistake, thanks! Enabling the "Bricksforge Panel" in the Bricksforge Settings / Extensions is all that is needed, nothing else.
Great video! But do we have to use that much containers?
Thank you. And surely not anymore. 😊👌🏻
🎉🎉🎉 ready for pt 3
Okay, I heard you! 👍🏻😊
I really needed this video!! Thank you 🙏🏽
Hey Shadrack - totally happy to hear that! You're welcome! 🤙🏻
Danke 🙂
Freut mich, wenns hilft, Benjamin! 😊
Good. Keep going 🤩
I'm happy you like it - thank you Erdenebileg!