chester

Hi, I'm trying out for my local project in Astro (https://astro.build/) how smoothScroll works, unfortunately after connecting the script, I tried directly attaching from cdn (https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollSmoother.min.js) or downloading and attaching the file and I get an error: Uncaught TypeError: Cannot set property window of #<Window> which has only a getter I don't know how to deal with this, is there a solution? The gsap itself works without a problem.

Hi, thanks @OSUblake for your code it helped me a lot. I just have a problem how to add in the above code to enlarge the square before the second point, and when we reach the second point then reduce the square to the starting value. I tried with adding tl.to(scrollItem, { scale: 3, duration: 3 }, 6); But then the animation speeds up terribly. Thanks in advance for your help.

Hi, I would like to do the scroll effect. With the scroll down the first line of text would be animated (blur effect), and the last line would remove blur. And a new line with a blur would appear. And conversely. A new line would appear with an animation from left to right. Please, help Screen: My code html (twig) : <section class="menu-container"> <nav class="menu"> <img src="{{ template_url }}/lib/img/Judgement.png"> <ul id="menu"> {% for word in dictionary %} <li data-id="{{ loop.index }}" class="menu__item"><a href="{{ word.link }}">{{ word.title }}</a></li> {% endfor %} </ul> </nav> </section> css: #menu { height: 500px; overflow-y: scroll; } .menu-container { margin-top: 70px; margin-bottom: 100px; .menu { text-align: center; width: 100%; position: relative; &__item { margin-bottom: 20px; a { font-size: 60px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.42; letter-spacing: normal; text-align: center; color: #1b1725; mix-blend-mode: difference; } &:last-of-type { -webkit-filter: blur(6px); filter: blur(6px); } } } }