Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Sascha Fincher

  • Posts

  • Joined

  • Last visited

About Sascha Fincher

Sascha Fincher's Achievements

  1. Thanks everyone, I figured it out. By copying stuff over to codesandbox, I realised that it was a problem with my webpack configuration and the order of execution. ScrollTrigger in home.js got actually called before the scroller proxy in main.js was assigned.
  2. Not sure I fully understand what you mean. In main.js (common code) I initialize loco scroll and set the scroller proxy to my smooth scroll container. In home.js (page specific code) I just use scroll trigger and pass the smooth scroll container to "scroller:" I can see the markers in the DOM being attached to the smooth-scroll container, but they are not moving at all.
  3. This cannot be the reason. I register scrolltrigger after the DOM is ready and I can see all objects that I need for the animation. There are no errors in the console - not even warnings. I do understand that this is super hard to analyze, but I cannot reproduce this in a codepen for obvious reasons.
  4. Having an issue with scrollerProxy which I don’t understand. Hi all, I am using ScrollTrigger and Locomotive Scroll in a node environment My structure is the following: main.js (this code will be used on all pages of the website) import gsap imports scrolltrigger imports locoscroll initializes locoscroll initializes the scrollerproxy exports the scroller proxy --> scrolltrigger working just fine home.js (this code is only being used on the home page) import gsap import scrolltrigger imports the scroller proxy (value “.smooth-scroll”) --> scrolltrigger NOT working. E.g. all markers move with the scroll. It seems like the scroller proxy is not recognized. When I copy the same code to main.js it’s just working fine. Does anyone have an explanation for this?
  5. Thank you so much, Cassie. I spent literally two days on this and couldn't figure it out.
  6. Thanks, Cassie. The codpen was just a simplified version of what I am trying to accomplish. I will only apply the effect when the image is in view, but event this might be too costly, especially because the effect will be dependent on scroll. I will need to test this out.
  7. Hi everyone, I am trying to recreated the effect on this site by animating the scale of an svg displacement map (you need to press and hold the mouse button to enter the list of images): https://yuto-takahashi.com (I know this has been done with WebGL, but I do not know enough about shaders and Three or Pixie to replicate it like this) My starting point is this codepen: https://codepen.io/GreenSock/pen/eYpGLYL?editors=0010 However I cannot get my head around the correct usage of the quickSetter when trying to animate the scale of feDisplacementMap, since scale of an sag filter is not a standard property. I also tried the attributePlugin, but with no luck,. When calling the quickSetter in the codepen I see the following error in the console: InvalidCharacterError: The string contains invalid characters. After trying for two days now to get this to work, I thought maybe someone could point me in the right direction.
  8. That‘s fantastic. It works for me. Thank you very much! Sascha
  9. Ok, if that's the case SEO should not be a problem. I changed the h1 into a div, but now the animation isn't working at all. I guess I need to rethink my layout/styling and try something different.
  10. Hi @mikel, in my responsive layout, I need to have the lines wrap automatically, so a separate span is not really my preferred option. Hi @OSUblake, I want to use this effect for all my h1 and h2 headers. Using a div instead would really hurt my SEO, wouldn‘t it? I understand that SplitText does not support this scenario, so I was wondering if I did not use the suggested workaround correctly.
  11. Hi everyone, I am trying to create a SplitText-Effect where the lines of a text block are being revealed one by one. The problem is that I am using two different fonts in that text block and I am aware that splitting nested elements is normally not supported. The docs pointed me to a workaround, but it somehow still doesn't work. I created a codepen that shows the problem. Would really appreciate if anyone could look into this.