tobimori

This is my take on it: I'd rotate the outer svg, and use stroke-dasharray for the single strokes. Timings need to be worked on of course, this was just 5 mins of experimenting. https://codepen.io/tobimori/pen/oNMmObW

I found the solution myself. Specify pinnedContainer to the same element on all ScrollTrigger instances and it works!

I tend to create single frames in Figma and use the Prototyping feature to smart-animate them together as a rough draft. Ends up looking like this: Frames auto-animate every 600ms which can be fine-tuned later on. Best way to make animations for websites and show them to clients without spending too much time on implementing them imho.

I have multiple horizontal scroll sections on my page, that do not take up 100vh, therefore, I'm pinning the parent element that wraps all sections. Sadly, this breaks the pin spacing calculation, as they apparently do not take triggers using the same pin element to account. (It works perfectly fine when not pinning the parent container, but I need to do that for visual reasons) Is there a way to fix this? I attached a CodePen Demo that shows the ScrollTrigger of the second horizontal scroll section starts too early.

Thanks. This finally worked.

The reason I'm pinning the whole page is to make the page look good on large screens without changing the design that much. I could make the horizontal container at least 100vh, but that wouldn't look as good as pinning the whole page. I made a small screen recording to show what I'm meaning: https://share.cleanshot.com/6huou3 Is there a way to have the section still centered with its own height, while keeping correct scroll links?

Am I understanding correctly that this helper function would just give me the position of the animation at specific progress? I'm looking to scroll to a section outside the animation, that's afterwards in content (as you can see in the codepen I made). How would I go about getting that position?

When using a ScrollTrigger to create a horizontally scrolling section and linking to a section afterwards with an anchor link, the browser isn't scrolling correctly and stops at a section before the actual section. I recreated this bug in the Codepen. The interesting thing here is that when behind the horizontal section, the Anchor link stops correctly. So it must be something with the browser not getting the correct "length" to scroll because the horizontal section expands it. What could I do to fix this?