Dennyno

Thanks a lot,totally forgot about the pin

Hi folks, since a while I don't touch GSAP, sadly. I making a reveal section, but I was trying to get a height which might be less than 100vh or 100svh (example 60vh) and on mobile I end to get a huge white pinspacing before seeing the next black section placeholder. If setting pinspacing false, I cant see all timelines animations. Which is the right way, as I can't remember? Setting 100vh (or 100svh) of course the problem goes way, as on my demo)... Thanks for any hint, as usual

Hey! Thanks @alig01 I was playing with your code, but seems bit hard to inject also scrolltrigger and have each function working together. btw.. thanks for your time gsap.registerPlugin(MotionPathPlugin, ScrollTrigger); MorphSVGPlugin.convertToPath("circle, line"); let roundtext = document.querySelector("#textPath"); let masterTl = gsap.timeline({ scrollTrigger: { trigger: "body", // or whichever element you want to listen for scroll events on start: "top top+=20", // animation starts when top of your trigger hits the top of the viewport end: "bottom bottom", // animation ends when bottom of your trigger hits the bottom of the viewport scrub: true, // enables scrubbing markers: true // Optional, shows markers where animation starts and ends } }); let tl = gsap.timeline({ defaults: { ease: "none", duration: 5 } }) .to(roundtext, { attr: { startOffset: "50%" } }); masterTl.add(tl); let tl2 = gsap.timeline({ repeat: -1 }) .to("#text", { rotate: -360, transformOrigin: "50% 55%", ease: "none", duration: 20 }); masterTl.add(tl2);

Hi all. How can I achieve the following complex result: the text path should start as already does (from left, following masterPath), then entering in the circle path, then the text should play endless inside that circle with a new infinite timeline. Basically I can make an hidden element and show it onEnd, but I guess there should be any clever gsap solution to morph the text path from the main one, to the circular one; then finally the image should appear. Thanks for any help

Thanks

Also my section height is 650vh (tested also more), but 1) the text is not even appearing 2) the phone svg is being cut but I guess it's already pinned too inside the parent section. Basically seems that flex-start breaks the whole code, while basically need to put that phone + images grid left aligned at then end of it's animations Btw, thanks for any help ??

Hi Yep I partially solved, right while I was posting here. But.. the text inside the pinned animation has gone away...

Starter point https://codepen.io/DedaloD/full/poQyvPp As it seems also the next has gone from the above one

Hi guys, which could be the solution to allow me viewing previous and next sections before and after the animated one? I got a pinned element, but need to pin it only when required (more as sticky, intead of fixed). EXAMPLE: A, B and C should not overlap the animated grid... Thanks

Thanks @Cassie, gonna see what happens

Thanks

Other related question: why MorphSVG gives error on the following path, saying that #dashedline is malformed? <svg id="connect-svg" viewBox="0 0 600 1200" xmlns="http://www.w3.org/2000/svg"> <defs> <mask id="theMask" maskUnits="userSpaceOnUse"> <path id="dashedline" class="theLineFull" d="m 157.895 241.085 c 62.561 116.897 125.079 109.776 231.114 78.452 c 287.882 -85.044 218.659 252.607 92.469 182.304 c -297.336 -165.652 -408.952 -5.205 -349.65 134.907 c 18.98 44.844 52.093 45.918 87.291 22.143 c 33.356 -22.531 13.046 -93.807 -23.654 -106.86 c -240.436 -85.514 -209.354 143.18 -51.712 160.189 c 220.7 23.813 19.633 358.903 -114.115 347.002" fill="none" style="stroke:hwb(0deg 100% 0% / 70%)" stroke-linecap="round" stroke-miterlimit="10"></path> </mask> </defs> <g mask="url(#theMask)" class="theLine"> <path d="m 157.895 241.085 c 62.561 116.897 125.079 109.776 231.114 78.452 c 287.882 -85.044 218.659 252.607 92.469 182.304 c -297.336 -165.652 -408.952 -5.205 -349.65 134.907 c 18.98 44.844 52.093 45.918 87.291 22.143 c 33.356 -22.531 13.046 -93.807 -23.654 -106.86 c -240.436 -85.514 -209.354 143.18 -51.712 160.189 c 220.7 23.813 19.633 358.903 -114.115 347.002" fill="none" style="stroke:hwb(0deg 100% 0% / 70%)" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="5" stroke-width="1" stroke-dasharray="10"></path> </g> <circle class="ball ball01" r="6" cy="220.572" cx="150" fill="#fff"></circle> </svg> Thanks

Hey @GreenSock Jack, solved banally with a Scrolltrigger condition Thanks https://codepen.io/DedaloD/pen/xxyWojJ

Hi all, the following code works smoothly (I guess so), but I think there's an issue somewhere because randomly I got a huge an annoying WARNING: invalid morph to: #ra-yt-ad WARNING: invalid morph to: #ra-bf-ad WARNING: invalid morph to: #ra-mac-screen Could it be caused by the prefetch links I got in header? Any hint how to fix this? (Using Barbajs it takes no-time to have a long error log). I tag @Carl as I bet he could have an easy solution for svg related stuff - but I'm open to any help :P