cerealbeast

Im using SplitText to reveal some text on a page which is working fine, but it is causing the page layout to break. The text column is 45% on desktop view and 100% on tablet and mobile view. When SplitText is active it is causing the layout to stay at 45% when the browser is resized to tablet view. When I turn SplitText off the problem is resolved. This is how the text should look (view in the page editor) This is how it looks with SplitText active This is my code (https://codepen.io/gwjr/pen/JjZwvGj) jQuery(document).ready(function($) { ;(function(){ let chck_if_gsap_loaded = setInterval(function(){ const eleBuilder = document.querySelector('body').classList.contains("elementor-editor-active"); if(window.gsap && window.ScrollTrigger && !eleBuilder){ gsap.registerPlugin(ScrollTrigger); gsap.registerPlugin(SplitText); text_reveal(); clearInterval(chck_if_gsap_loaded); } }, 500); function text_reveal(){ const splitLines = new SplitText(".split-me p", { type: "lines", linesClass: "scroll-reveal scroll-reveal++" }); jQuery(".split-me .scroll-reveal").wrap('<div class="scroll-reveal-wrapper">'); gsap.utils.toArray(".scroll-reveal").forEach((el) => { gsap.from(el, { yPercent: 200, duration: 1, ease: "power4", scrollTrigger: { trigger: el, start: "top 90%" } }); }); }; })(); });

Got it working, just had to amend the URL slightly again. Thanks!

Ahh sorry about that! I have amended the url and I'm still getting the same error. I also have this error: Uncaught ReferenceError: SplitText is not defined Here is my code (Im using elementor so have to include additional code beforehand to get it working). The error is pointing at the following line gsap.registerPlugin(SplitText); jQuery(document).ready(function($) { ;(function(){ let chck_if_gsap_loaded = setInterval(function(){ const eleBuilder = document.querySelector('body').classList.contains("elementor-editor-active"); if(window.gsap && window.ScrollTrigger && !eleBuilder){ gsap.registerPlugin(ScrollTrigger); gsap.registerPlugin(SplitText); text_reveal(); clearInterval(chck_if_gsap_loaded); } }, 500); function text_reveal(){ const splitLines = new SplitText(".split-me p", { type: "lines", linesClass: "line line++" }); jQuery(".split-me .line").wrap('<div class="line-wrapper">'); gsap.utils.toArray(".line").forEach((el) => { gsap.from(el, { yPercent: 200, duration: 1, ease: "power4", scrollTrigger: { trigger: el, start: "top 60%" } }); }); }; })(); });

Hi, I just purchased Shockingly Green so that I can use Split Text on my site, but I'm having trouble installing it. I'm using Wordpress, I have uploaded the minified SplitText.js file into a new folder called GSAP in the 'public_html' folder. Then I have added a script tag in an HTML document with all my other script tags. <script src="[REDACTED]"></script> I am getting this error in the console: GET [REDACTED] net::ERR_ABORTED 404 If anyone can help me get this working that would be amazing!

Perfect thanks!

I have a image reveal when hovering text, currently the image exits vertically when the mouse leaves the text but I'd like to make it quickly fade out instead, is that possible?

I have been given this code by a friend, its an image reveal on text hover using GSAP. I need to swap out the videos for images. I have replaced "data-video" with "data-image" in the html but I think the js has to also be amended and I'm not quite sure how to do so. The bottom text hover is working using a video, the top one I have replaced with an image but its not currently working.