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?