Olav

Hi, Thanks for the example, seems to be exactly what I need!

Hi all, I'm trying out some pinning effects and I can't seem to find a solution for one I have in mind. I've taken a good look at all the layered pinning examples but I think this requires something else. https://codepen.io/olavgit/pen/poBaBZZ What I'd like to achieve is that the red element scrubs through an animation. When that animation is finished, it should remain pinned but let the pink element with opacity 0.5 scroll over the red section. What I had in mind was that the pin should remain in place, but when the animation is finished, pinSpacing should be disabled? In any way, can't get it to work properly, does anyone have a suggestion? Thanks in advance!

I couldn't help but try to figure out another way to make this work, and I'm nearly there. I just can't get my hands on the positioning of an svg clipPath, which isn't gsap related, but maybe someone here has the missing answer to my problem. I have created this very very minimal demo: https://codepen.io/olavgit/pen/jOdbaZP All I want is for my custom clipPath to be centered on the element it is clipping, just like the behaviour of the red circle. Is this possible?

Thanks for the lead @Cassie, I ended up with this: https://codepen.io/olavgit/pen/oNmNjRg Achieves the same effect, but in a slightly hacky way I guess. Do you think this could be optimised?

Hi @Rodrigo, Thanks for your examples! I can see this working with 'simple' shapes, but what if I need to use a logo or another svg which would be to complex to recreate in the css clip path property. Can we also handle this using the actual svg clipPath? And do you maybe have an example for that?

Hi all, I'm trying to implement the following effect: https://imgur.com/26yCYUZ I've found it on a few website's such as: https://martingarrix.com https://tilt.digital https://lanouvelle.agency Included is a minimal demo on how the html/css/scrolltrigger should behave, although I have no idea on how to actually implement the svg / clip path effect. Does anyone have an idea in the right direction, or another codepen using the same concept? Thanks in advance!

Perfect solution, many thanks @mvaneijgen!

Thanks for you reply! It seems like you are totally right, I edited my codepen a bit: https://codepen.io/olavgit/pen/PoyLgGb As you can see, making both values use 6 points, the animation plays. Not with the calc function though, if you uncomment those you can see the animation doesn't play. I'd like for my corners to be straight, and not use percentage based values. Any ideas on how I could get this working? In some other clipPath related posts I saw @Cassie mention the use of css variables, will that influence things?

Hi all, I've included a codepen where I'm trying to animate a complex clipPath which I can't seem to get working. For now, it is supposed to animate from the complex css clip-path, to the simple gsap clipPath. Would this be possible, and if so, would it also to animate from a complex clip-path to a complex clipPath? Read complex as a clip-path that uses the css calc() function. Thanks for reading!

Hi everyone! I'm building a NextJS project with some SplitText effects, I'm struggling to make those responsive. My current effect looks like this: export default function Footer() { const el = useRef<HTMLDivElement>(null) useIsomorphicLayoutEffect(() => { const ctx = gsap.context(() => { gsap.set('footer .reveal', { opacity: 1 }) const targets = gsap.utils.toArray('footer .reveal') as gsap.DOMTarget[] targets.forEach((target) => { const childSplit = new SplitText(target, { type: 'lines', linesClass: 'lc', }) const parentSplit = new SplitText(target, { type: 'lines', linesClass: 'lp', }) gsap.from(childSplit.lines, { yPercent: 100, stagger: 0.18, duration: 0.6, ease: 'power3.out', scrollTrigger: { trigger: target, start: 'top 80%', toggleActions: 'play none none reverse', }, }) }) }, el) return () => ctx.revert() }, []) return ( <footer> {/* content */} </footer> I'm following the Creative Coding Club course by @Carl, who has provided the following example: https://codepen.io/snorkltv/pen/jOBgJbo Which is exactly what I need, only thing is, how to implement in a React context, instead of 'regular' javascript. I've been searching through the forum but can't seem to find another example like this one. Thanks in advance for your time, any reply's are appreciated!

@EfrainBergin I've got something working but I'd be more than glad to hear your solution aswell!

Although it works perfectly in javascript, I'm getting some errors in my typescript project. I won't bother to fix the ones that won't be necessary after version 3.11.5, since I can throw those out anyway, after the update. existingTriggers.forEach((t) => t.revert(true, true)); // revert existing ScrollTriggers On this line, I'm getting a TS2339: Property 'revert' does not exist on type 'ScrollTrigger'. I'm not a typescript hero at all, but this is a line that I'm supposed to keep. How would I fix that? Also for my useRef's I've been using a type of <any>, what would the correct types for these be? const smoother = useRef<any>(null); const ctx = useRef<any>(null);

@GreenSock thank you so much for actually taking the time to figure this one out! You are a hero. I've implemented your solution and works like a charm, haven't found any hiccups yet.

@GreenSock any chance you've taken a look at my minimal demo, did it demonstrate my issues properly? I'm really hoping to find a solution since my project heavily relies on these animations. I've been experimenting all week but can't seem to get improvement.

I've spent some time creating a demo which shows my problems perfectly, I hope it'll be useful in finding a solution. See it here: https://stackblitz.com/edit/nextjs-jbcb2g?file=app/layout.js I've recreated the original reason for creating this post, I have some effects which should reveal text from below (box-c and box-d in the demo), but the animation doesn't fire properly. Instead of playing the animation, the elements jump into place once you hit the scrolltrigger. If you scroll fast enough, you can still catch part of the animation playing, so I guess the animation is playing directly on load, not waiting for the scroll trigger. The second effect is place in the <Footer /> component, which is loaded in the layout.js file. The animation also uses a scroll trigger. For starters, it doesn't set the .from position properly, since you can still see the path's jump into place when scrolling down the page. Once they are in the correct position, the animation seems to work fine, until you navigate to another page. Try going the 'ipsum' page in the menu, the footer animation freezes and also the scroll trigger markers disappear. I've also implemented your posted solution in the layout file @GreenSock, but it doesn't seem to work right now. Other than that this is the starter file made by greensocklearning, so no other configuration done by me.