Видео

If you have multiple elements, you need to use forEach loop and document.selectorAll('.class') so that it works on all elements. Check the longer version of this video in the description or use chatGPT and ask it to make it work on all CSS class.

It has to do with cache issues.

Is your image big enough or long enough? Not sure why blur would be happening. You can use custom CSS without Elementor Pro using html widget or royal addons for elementor plugin. You can check it in my youtube video "Get Elementor Pro features for Free"

It's probably cache issues in your mobile. Try clearing cache and check in incognito.

@@jyotibarasker2792 Yes, you can use Elementor free with free themes( oceanwp(recommended), astra). The above method works with free elementor.

@@jyotibarasker2792 check my latest video for animations.

Glad it was helpful!

I have added JS with HTML widget in Elementor. For blurry text reveal, you just need to use CSS filter:blur(10px); and use GSAP to do it.

@@DMmotionarts this is the code : // Import the TextSplitter class for handling text splitting. import { TextSplitter } from '../textSplitter.js'; // Defines a class to create scroll-triggered animation effects on text. export class BlurScrollEffect { constructor(textElement) { // Check if the provided element is valid. if (!textElement || !(textElement instanceof HTMLElement)) { throw new Error('Invalid text element provided.'); } this.textElement = textElement; // Set up the effect for the provided text element. this.initializeEffect(); } // Sets up the initial text effect on the provided element. initializeEffect() { // Callback to re-trigger animations on resize. const textResizeCallback = () => this.scroll(); // Split text for animation and store the reference. this.splitter = new TextSplitter(this.textElement, { resizeCallback: textResizeCallback, splitTypeTypes: 'words' }); // Trigger the initial scroll effect. this.scroll(); } // Animates text based on the scroll position. scroll() { // Query all individual words for animation. const words = this.splitter.getWords(); gsap.fromTo(words, { opacity: 0, skewX: -20, willChange: 'filter, transform', filter: 'blur(8px)' }, { ease: 'sine', // Animation easing. opacity: 1, skewX: 0, filter: 'blur(0px)', stagger: 0.04, // Delay between starting animations for each word. scrollTrigger: { trigger: this.textElement, // Element that triggers the animation. start: 'top bottom-=15%', // Animation starts when element hits bottom of viewport. end: 'bottom center+=15%', // Animation ends in the center of the viewport. scrub: true, // Animation progress tied to scroll position. }, }); } } What I need too ?

@@DMmotionarts tympanus net/Development/ScrollBlurTypography/ this the demo that I want it's amazing add .

You will need to use toggleAction. Look into GSAP docs.

Thanks ✌️

You're welcome!

Hindi me pahele se bahut saare channels hai

OK, answering my own question here - I should be able to drop my own containers into your format once they are created, is that right? If so, you'll be my hero forever!

Yes, you can create your own content with elementor for both front and back

Technically it should work as GSAP is also part of javascript,

You can contact me via Instagram @dm.motionarts OR email me via my websites contact form.

I already have few videos of GSAP animations. I am working on creating basics of GSAP soon.

window.addEventListener("load", () => { Add whole code here }); You might also need to give opacity:0 OR scale:0, so that initially it is hidden. Sometimes, preloader are good but not a good practice to have preloaders for normal websites.

@@DMmotionarts Thanks this worked great!

@@DMmotionarts I've just noticed that using this method I get line breaks in the wrong places on mobile - I am using a nested span element as there are 2 fonts in my text. Any ideas how to make the span flow with the rest of the text?

@@chubbec The text split JavaScript library converts the text into containers. Try adding CSS for gap in the main Text CSS class.

@@chubbec Also, try checking the longer version of this tutorial, the link is in description. That may help to understand a bit more. You might need to use media query in CSS to control only mobile settings

Check my Text Stagger GSAP tutorial

Is the progress bar not synced or is it not moving at all?

@@DMmotionarts It´s not synced. Only on microsoft edge it works. But only when I am logged in in WP.

@@ZenzeitionLLC Did you try downloading the template? or created one yourself? You can send me the URL to check it , on instagram @dm.motionarts

@@DMmotionarts I did it with your template Could padding and margin changes cause the issue? It works being logged in to WP though. So that indicates that it should be a script loading problem. It seems like the code doesn´t calculate the vh in the right way. As I say, as soon as I zoom in or out, the progress bar works, but also only for that particular container which is in the viewport

​@@ZenzeitionLLC Hard to tell the issue without checking the live page. Also, clear the cache, go to elementor--> tools--> regenerate CSS and sync library. If you have extra domain or subdomain, check the template in it with hello elementor theme.

Working on it. You can follow facebook group to get sneak peeks at work in progress projects.

@@DMmotionarts will do

For forms, you can use Elementor form if you have pro. If you don't have pro, then install "contact form 7" plugin and "premium addons for elementor" plugin and then use contact form 7 widget by premium addons to customize it. For more details on Premium addons for Elementor: You can check my video "How to use PRO features of Elementor without Elementor Pro". If you're trying to create form completely from scratch, then you will need to learn PHP, HTML,CSS,JS etc. I am not familiar with it.

@@DMmotionarts i will check it out, thanks 👍👍