Punchify Me

That's weird. Because I tried on two laptops and I have the same issue. Could you please confirm that it's not an issue for you on the live website https://www.cyclable-for-good.com/ It's password protected for the moment, but I will share the access with you ina private message. The slider shows after the splash screen video (you can click on passer l'intro button at the bottom of the screen).

Ok I see. The bug is only visible if you change the view to debug mode. Here is a screenshot

It works fine on first scroll down and back up. But after that the slider keeps shifting towards left. I can add an image/ video once I have access to a Mac but I can't figure out how to add a media Thanks

Hi, I am using GSAP to create a horizontal pinned slider (see codepen demo). The slider works perfectly on all browsers, except on Safari (MacOS BigSur). On scrolling, the slider shifts towards the left instead of staying fixed within the pinned container. Could you please direct me as to why this might be happening? Thanks !

I figured, you had used innerwidth in calculating yMask, corrected it thanks a ton!!

@Cassiethanks a ton. But you see, the mask does not 'go'/cover the bottom of the 'welcome on board' section.

Hi @Cassie Many thanks, I tried with the mask-image property, which is my preferred solution as I have to show content and I don't necessarily need to morph the shape. I have tried the mask-image approach in your article, modified to take into consideration the technical constraints. However I still have a lag between the mouse position and the mask, and I am unable to cover the edges (top and bottom) of the section with the mask. I am sure it has to do with my calculations, but I cannot seem to get it right. here is a new pen : https://codepen.io/sunshinetainted/pen/rNyOdoG

Hello, Many thanks for your comments. I have managed to make it work. But I still have a slight problem in that the mouse cursor seems to be not aligned with the clipPath. The movement also seems to be a bit jerky. Here is a reduced case CodePen: https://codepen.io/sunshinetainted/pen/wvJKpEe

Many thanks to all of you! I now have a good base to start with!

I am trying to achieve an effect similar to the background reveal with mouse movement as seen here : https://www.luckyfolks.fr/. I am not really sure how and where to start. The svg code for the blob is: <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 980" style="enable-background:new 0 0 1920 980;" xml:space="preserve"> <style type="text/css"> .st0{fill:#FFC845;} </style> <g> <path class="st0" d="M0,0v980h1920V0H0z M1646.8,396.1c-0.3,4.1-1.7,8.3-2.2,12.4c-1.4,12.3-4.4,24.4-7,36.3 c-0.9,4-1.8,7.9-2.9,11.9c-1,3.9-2.1,7.9-3.3,11.8c-1.8,5.9-3.7,11.7-5.8,17.5c-0.7,1.9-1.4,3.9-2.2,5.8c-1.5,3.8-3,7.7-4.7,11.5 s-3.3,7.6-5.1,11.4c-4.5,9.5-9.4,19-14.9,28.4c-5.4,9.2-27.5,44.9-38,56.3c-1.8,2-3.7,3.9-5.6,5.8c-3.8,3.8-7.7,7.5-11.7,11.1 c-8,7.1-16.5,13.7-25.3,19.8c-8.8,6.1-18,11.8-27.5,17.1c-14.2,7.9-29,14.9-44.1,21.3c-7.6,3.2-15.2,6.2-22.9,9.1 c-2.6,1-5.1,1.9-7.7,2.8c-12.9,4.6-25.9,8.9-38.8,13c-7.7,2.4-15.5,4.8-23.1,7c-5.1,1.5-10.2,3-15.2,4.5c-2.5,0.7-5,1.5-7.5,2.2 c-76.3,22.3-128,13.5-217.6,12.6c-3.1,0-6.2-0.1-9.3-0.2s-6.2-0.3-9.3-0.6c-31.2-2.4-63.4-9.9-92.6-22.2c-2.9-1.2-5.8-2.5-8.7-3.8 c-2.9-1.3-5.7-2.7-8.5-4.1c-2.8-1.4-5.6-2.9-8.3-4.4s-5.4-3.1-8-4.7c-2-1.2-4.1-2.7-6.2-4.3c-9.2-7.1-19.1-17.4-25.4-24.2 c-48.9-52.7-60-92-54.2-162.4c4.7-57.5,18-115.3,49.4-164.3c1.5-2.3,20.5-31.5,30.3-38.4c15.1-10.6,32.4-18,46.8-29.5 c2.4-1.9,4.7-4,6.9-6.1c2.2-2.1,4.4-4.3,6.4-6.6s4.2-4.6,6.2-6.9c1.4-1.5,2.7-3.1,4.1-4.6c3.4-3.8,6.9-7.6,10.6-11.2 c11.6-11.1,24.7-20.5,38.8-28.1c5.3-2.8,10.7-5.4,16.3-7.7c1.9-0.8,3.7-1.5,5.6-2.2c5.7-2.1,11.5-4,17.4-5.5c2-0.5,3.9-1,5.9-1.5 c4.5-1.1,9-2.1,13.2-3c2.8-0.6,5.6-1.3,8.4-1.9c2.7-0.6,5.4-1.2,8.1-1.8c1.3-0.3,2.6-0.6,3.9-0.8c2.6-0.6,5.1-1.1,7.6-1.6 c3.7-0.8,7.4-1.5,10.9-2.2c4.7-0.9,9.3-1.8,13.8-2.6s8.8-1.6,13.1-2.3c2.1-0.3,4.3-0.7,6.4-1c5.3-0.8,10.4-1.5,15.6-2.1 c2.1-0.2,4.1-0.5,6.1-0.7c1-0.1,2-0.2,3.1-0.3c3.1-0.3,6.1-0.6,9.2-0.9c1-0.1,2.1-0.2,3.1-0.3c3.1-0.2,6.2-0.5,9.4-0.6 c2.1-0.1,4.2-0.2,6.3-0.3c2.1-0.1,4.3-0.2,6.5-0.3c2.2-0.1,4.4-0.2,6.6-0.2c2.2-0.1,4.5-0.1,6.8-0.2c20.6-0.4,43.7-0.1,72.5,0.7 c3,0.1,6,0.2,9,0.3c6,0.2,12.1,0.6,18.2,1c3.1,0.2,6.1,0.4,9.2,0.7c7.7,0.6,15.3,1.4,23,2.5c4.6,0.6,9.2,1.3,13.8,2 c1.5,0.3,3,0.5,4.6,0.8c4.6,0.8,9.1,1.7,13.6,2.7c1.5,0.3,3,0.7,4.5,1c4.5,1,9,2.2,13.4,3.4c5.9,1.6,11.8,3.4,17.5,5.4 c2.9,1,5.7,2,8.6,3.1c2.8,1.1,5.6,2.2,8.4,3.4c55.3,23.7,98.2,78.6,127.3,129.1c1.3,2.3,10.6,19.1,16.2,36.7 C1650.5,366.1,1648,381.6,1646.8,396.1z"/> </g> </svg> I would highly appreciate any tips and help on this. Thank you.

Many thanks Zach. Using anticipatePin does help with the abrupt pinning. I will also try to rewrite my code to use loops.

Hello, I am having some issues with SVGMorph and ScrollTrigger. A reduced case demo is on codepen : https://codepen.io/sunshinetainted/pen/gOMggeZ (not responsive yet) 1. ScrollTrigger : Abrupt pinning: I notice a slight jump when the slider section pins to the top of the screen and again when it repins on re-enter. I have tried modifying with start and end values but that does not seem to change the behaviour. Animation end : I would like to wait for the last wave to completely transform before unpinning the section and scrolling down to the next section. I suspect that both these problems are due to me not properly defining the start and end or the scrub / snap values. 2. SVG Morph: I would like the waves to morph continuously based on scroll speed. Right now, I have to scroll a lot or scroll really slowly for the morphing to be evident. I would appreciate inputs on how to solve these problems as well as any code errors. Thank you