Helpful ! Thank you

Thanks Bro

nice

AI-Generated Video, PUSHING one tool, BAD FORM!

Thank you for great knowledgeable content

JavaScript Code <script src="cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function () { // Ensure all fonts are loaded before starting the animation document.fonts.ready.then(function () { // Select the heading with the class 'split-text' const heading = document.querySelector("h2"); if (heading) { // Get the text content of the heading const text = heading.textContent; // Clear the current text content of the heading heading.textContent = ''; // Create a div for each word and span for each letter text.split(' ').forEach(word => { const wordDiv = document.createElement('div'); wordDiv.className = 'word-wrapper'; // Split the word into characters word.split('').forEach(char => { const charSpan = document.createElement('span'); charSpan.className = 'letter'; charSpan.textContent = char; wordDiv.appendChild(charSpan); }); // Append the word wrapper div to the heading heading.appendChild(wordDiv); }); // GSAP animation for the words and characters to appear from below the div gsap.fromTo(".word-wrapper", { y: "100%", // Start position below the wrapper }, { y: "0%", // End position in its normal place stagger: 0.2, // Delay between each word animation ease: "power2.out", // Easing function for smooth animation duration: 1.2, // Duration of the animation opacity: 1 // Ensure opacity is set to fully visible }); gsap.fromTo(".letter", { y: "100%", // Start position below the wrapper }, { y: "0%", // End position in its normal place stagger: 0.05, // Delay between each character animation ease: "power2.out", // Easing function for smooth animation duration: 1.2, // Duration of the animation opacity: 1 // Ensure opacity is set to fully visible }); } }); }); </script> ================================================================ CSS CODE .reveal-wrapper { overflow: hidden; /* Hides elements that go outside the container */ display: block; /* Make sure the wrapper is a block to contain the words */ width: 100%; /* Adjust to fit your container */ } .split-text { display: block; /* Make sure text is block-level to allow words to stack */ white-space: pre-wrap; /* Preserve whitespace and allow line breaks */ } .word-wrapper { display: block; overflow: hidden; /* Forces each word to be on a new line */ transform: translateY(100%); /* Starts below the container */ margin-bottom: 10px; /* Optional: Adds spacing between lines */ } .letter { display: inline-block; /* Needed to apply transforms individually */ transform: translateY(100%); /* Starts below the container */ }

code Please!

Helpful -- would really like to have voiced narration though :)

Bricks is by far the better page builder. Elementor has become too bloated and layered in order to keep up with all the changes slowing it down resulting in slower web page loading. Bricks is the new standard.

No voiceovers? This ain't 2009

Thanks a lot for this video! Can You make one video - How we can mace WooCommerce website with Bricks?

Did you change your Theme styles for your container so that your header will the total width of the canvas? My header has a margin on both sides but I haven't changed any settings since I bought Bricks. I seen that you have your max width set for a 100% and I also did that but there is no change in the container.

Thank you for talking throughout the video, it helps a lot!!

Loved this! Can you make a video where this header is functionable and when you click on it, it will redirect you to another page.

Thanks for the great tutorials

Thank you very much

Subscribed❤

Thanks ❤

whats up with all the drama music... for a tutorial? terrible

Nice shorts about wordpress and seo.

Very nice definitions.

???????