TrulyNewbie

Thank you!

I also tried this but It doesnt work once I remove some li and leave only 5. https://codepen.io/NewbieRuby/pen/vYQLGVj

Hi I tried to make this vertical, I changed all the Xpercent to Ypercent. but it didnt quite work. Is there more work to it than that? I've looked a ton of other threads, but I couldn't seem to find one that would be vertical. I plan to repuprose the code to use it like redis agency Thank you

Hi I tried to make this vertical, I changed all the Xpercent to Ypercent. but it didnt quite work. Is there more work to it than that?

Thank you so much for pointing that out! My idea was that the two words are stacked, and as you scroll they scale down ad go side by side. So I've tried to code it myself, and i removed the button and I think I'm close. But somethings not right. The triggers dont work correctly. Sorry to pester you with questions https://codepen.io/NewbieRuby/pen/poxpxMw

Hi, I have an issue where I the container holding the flip changes height on flip change. Is there a way I can have the div not change height? My other issue is that when you click the button the flip happens, the height changes (which I dont want to happen) and then when you click the button again its like theres a delay in undoing the flip Thak you for your help flexflipping.mov

I see! Thank you Rodrigo! My mistake! For anyone else who may have this issue. I made GSAP a dependency on my custom js file, but I also needed to make JQUERY a dependancy too. from: wp_enqueue_script( 'gsap-app', get_template_directory_uri() . '/js/ruby-app.js', array('gsap-js'), false, true ); to: wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js', array(), null, true); wp_enqueue_script( 'gsap-app', get_template_directory_uri() . '/js/ruby-app.js', array('jquery', 'gsap-js'), false, true );

My functions.php // The proper way to enqueue GSAP script in WordPress // wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); function theme_gsap_script(){ // The core GSAP library wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js', array(), false, true ); wp_enqueue_script( 'gsap-st', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js', array('gsap-js'), false, true ); wp_enqueue_script( 'gsap-scrl2', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollToPlugin.min.js', array('gsap-js'), false, true ); // Your animation code file - with gsap.js passed as a dependency wp_enqueue_script( 'gsap-ss', get_template_directory_uri() . '/js/ScrollSmoother.min.js', array('gsap-js'), false, true ); wp_enqueue_script( 'gsap-mrph', get_template_directory_uri() . '/js/MorphSVGPlugin.min.js' , array('gsap-js'), false, true ); wp_enqueue_script( 'gsap-splt', get_template_directory_uri() . '/js/SplitText.min.js', array('gsap-js'), false, true ); wp_enqueue_script( 'gsap-app', get_template_directory_uri() . '/js/ruby-app.js', array('gsap-js'), false, true ); } add_action( 'wp_enqueue_scripts', 'theme_gsap_script' ); add_action( 'wp_enqueue_scripts', 'themeprefix_slick_enqueue_scripts_styles' ); function themeprefix_slick_enqueue_scripts_styles() { wp_enqueue_script( 'slickjs', get_stylesheet_directory_uri() . '/js/slick.min.js', array( 'jquery' ), '1.6.0', true ); wp_enqueue_style( 'slickcss', get_stylesheet_directory_uri() . '/css/slick.css', '1.6.0', 'all'); }

Hi, I've built all my wordpress websites using GSAP using the exact same 'layout' of code. But recently when I began to use 3.11.3 as opposed to 3.10.3 I keep getting messages saying "$ is not a function". I've set up my codepen exactly how my site is. Is this a wordpress thing or GSAP thing or a me thing? Thank you for your help

Hi, I remember skimming over something that said that theres a function or something of that sort, that finalises tweens if they're quickly scrolled past? Could some one please remind me of the correct term please. Thanks

Thank you for your help. I didn't consider that a fixed element could not be a trigger . Thanks And - "And why were you setting the height to something invalid like this?:" That was an accident, I was playing around with ideas and must've accidentally hit save.

Hi, on my website, I have a slider that changes height, so when it's clicked the footer is cut off. So I made a small demo. When I click the button, the fixed .box in the background scroll triggers reset. So it fades back in. How can I make it so it when I click the button that triggers the ScrollTrigger refresh, the .box div isn't affected? I've tried, toggleActions, and invalidateOnRefresh: false Thank you for any help

Thank you!

Perfect! Thank you all for your help!

Thanks, I tried that a few days ago, but I couldn't figure out how to add the roatation

Hi, I tried to figure it out on my own but I'm stuck. The first two parts of my animation work how I want it to, but the last part doesnt. When i scroll down 50vh, I want the floating animation (rotatesletters) to stop and the shapes stop moving And then when I scroll back to the top of the screen, I want the floating animation (rotatesletters) to start again. I've tried: 1. overwrite: "auto", 2. rotatesletters.pause() 3. functions I've also rewritten the code four different ways I appreciate any help. Thank you

THANK YOUUUUUUUU! HAPPY EASTER ❤️❤️❤️❤️❤️❤️❤️

Thanks for your help, but unfortunately that doesn't work on my site or on the demo

I've never made a sandbox before! Thanks for showing me https://codesandbox.io/s/nice-kapitsa-e0uodo?file=/index.html So this is work exactly like how I mentioned. When you click the external button, on the about page, theres a huge gap at the bottom, and you cant scroll to the top of the page to see the text. It also doesnt load at the top of div # Thanks again

That's what I was trying to explain. The demo couldn't show the issue, because the issue only appears when you click a link to scroll to a section on another page. E.g You are on this page: https://new.com/ and then you click a button that brings you to - https://new.com/about#approach But when you load in you can't scroll to the top (it's cut off), it doesn't load at the top of the anchor (loads half way down), and theres a huge gap at the bottom

Hi, thanks for your help, I've tried the codes but it doesn't fix the issue. The page loads at the top of the anchor, but I cant scroll above it, and beneath it is the footer and a huge gap

Sorry about that, I thought because the link was external it might be pointless to show. So when I click "internal" It scrolls down, but when I click "external" on my Wordpress site, I have the issues mentioned above. https://codepen.io/NewbieRuby/pen/gOoQrLx

Thank's ill try that out

Hi, I don't think it's possible to create a CodePen. I have a smoother scroll enabled, and When I click a link e.g (Ruby.com/about#me), it scrolls to the anchor, but the page is messed up. You can't scroll to the top (it's cut off), it doesn't load at the top of the anchor (loads half way down), and theres a huge gap at the bottom. I've tried to use scrollTrigger.update/refresh but to no avail. Thanks again! function getSamePageAnchor (link) { if ( link.protocol !== window.location.protocol || link.host !== window.location.host || link.pathname !== window.location.pathname || link.search !== window.location.search ) { return false; } return link.hash; } // Scroll to a given hash, preventing the event given if there is one function scrollToHash(hash, e) { const elem = hash ? document.querySelector(hash) : false; if(elem) { if(e) e.preventDefault(); // Scroll to the element in the URL's hash on load gsap.to(window, {scrollTo: elem}); } } // If a link's href is within the current page, scroll to it instead document.querySelectorAll('a[href]').forEach(a => { a.addEventListener('click', e => { scrollToHash(getSamePageAnchor(a), e), console.log("click and scrolled"); }); }); // Scroll to the element in the URL's hash on load scrollToHash(window.location.hash);

Thank you. That works! But what about: window.addEventListener('load', (event) => { locoScroll.stop() }); function goAhead() { locoScroll.start(); } }}); How can I replicate this?