cerealbeast

perfect, thanks!

Thanks but this doesn't seem to be working? I can still see the text on page load.

Hi, Sure, I have edited my post to include a Codepen.

I haven't used GSAP for quite a while and I am struggling to remember how to correctly hide text on page load using autoAlpha. Would be super appreciative if someone could show me where to add to below code. Thanks! 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%" } }); }); jQuery(window).resize(function () { splitLines.revert(); }); } })(); });

Amazing thanks for the help @mvaneijgen

Thanks, got it working properly now. I amended the html on @Cassie's demo (the viewbox values I used were wrong). For some reason when I forked the codepen to my own profile it doesn't animate though. https://codepen.io/gwjr/pen/OJwVVre

Ahh its working now! Thank you Cassie. One last thing, how do I move the animation to the centre of the screen and make it responsive?

Thanks Cassie, although I can't see anything being animated?

Ok I've managed to get it working (just about). https://codepen.io/gwjr/pen/WNKbagv Are you able to help me get it to the point where it animates on a pinned section like this? https://codepen.io/GreenSock/pen/WNONMXP

This thread states that you can use the pen tool in illustrator, so can I just draw the shape I want with the pen and then get the code needed to animate it with GSAP? Apologies, this is the first time I've looked at clip paths so have absolutely no idea where to start!

I've read the first three articles you linked, unfortunately they don't explain the absolute basics of creating a shape and retrieving the code required.

I have illustrator, I just have no idea what I have to do to get the code I need. Do I trace my logo with the pen tool in Illustrator? Then whats next?

I want to create an animation on my site where a section is pinned and my logo (lightning bolt) is drawn as you scroll. I have been reading/looking at codepens (like the one attached) for a few hours and I'm just a bit confused as to how to get started. How do you create a custom path? It seems that there must be an easier way than having to hand code all of the points as I wouldn't even now where to begin! Is there a way you can upload an image and trace the points over the top or something?

Great thanks! I'll have a play around and see if I can get it working properly

Is it possible to pin each of the three horizontally scrolling sections for a short time so that when it reaches the middle of the screen it remains there briefly as you scroll before scrolling on to the next one?

Thanks for the explanation @akapowl

I'm struggling to get the correct width for a horizontal scroll section. There are 3 sections, each one ha a width of 100vw, then there is a spacer div in between each section with a width of 5vw. So the total width of the 3 sections and 2 spacers is 310vw. But when setting the width of the container div to 310vw or 310%, there is still part of the last section cut off. Does anyone know how to fix?

Trying to implement 'data-speed' using scrollsmoother on my site but whenever I add a data-speed attribute, it moves the div's starting position which breaks the layout of the site. I have found a website that is using 'data-speed' on sections and somehow keeps the divs in the same starting position. I can't see anywhere in the code for that site that is making this work correctly like this, hoping someone can help me out. I have forked a Greensock codepen of a simple scrollsmoother page and changed the height of the top section from 100vh to 50vh to show how it "breaks" the layout: https://codepen.io/gwjr/pen/qBKwdmZ

Solved, needed to update version of GSAP

Hi, Im trying to install ScrollSmoother on my site, I have uploaded the file to my server and linked it in the scripts but im getting the following error in the console: ScrollSmoother.min.js:10 Uncaught TypeError: Cannot read properties of undefined (reading '_getVelocityProp') at Function.register (ScrollSmoother.min.js:10:940) at _createPlugin (gsap.min.js:10:43609) at gsap.min.js:10:43627 at Array.forEach (<anonymous>) at Object.registerPlugin (gsap.min.js:10:43132) at ScrollSmoother.min.js:10:11234 at ScrollSmoother.min.js:10:140 at ScrollSmoother.min.js:10:175

Ok thank you Rodrigo, hopefully @GreenSock knows how to fix it!

Does anyone at Greensock have a solution for this?

I have found a temporary solution which just stops the animation when the browser is resized and this fixed all of the text issues, but it would be better to have a solution that allowed the animations to continue working after the browser is resized. jQuery(window).resize(function () { splitLines.revert(); }); EDIT: it also stops the animation working on mobile https://codepen.io/gwjr/pen/JjZwvGj

Unfortunately I'm still having the same problem. When resizing the browser the text is not responsive, the line breaks change and there are blank spaces etc. You can see this behaviour on your example also. Looking through this forum I can see lots of people with similar issues, it seems I may need to use 'revert' somehow so that when the browser is resized the code is re initiated?

I just posted at the same time as you, let me check the codepen you provided and get back to you.