[DrawSVG - looping stroke animation around circle, slight jump at end of loop]

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.

See the Pen oNMmObW by tobimori (@tobimori) on CodePen

[Pin spacing is not working when pinning the same element]

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

[GUI for GSAP3?]

2 hours ago, Creek said:

Y'all are obviously the guru gods - for me, attempting to "storyboard" with XD takes more time than it would to code. So how do y'all go about presenting various animation concepts, prior to all of the coding? Or is it just a start frame, some middling stuff, and the end? 

 

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.

[Pin spacing is not working when pinning the same element]

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.

See the Pen MWGRybO by tobimori (@tobimori) on CodePen

[Horizontal Scroll Trigger Section breaks Anchor links to content afterwards]

On 10/18/2022 at 1:26 AM, GreenSock said:

Here's the helper function being used in your original demo: 

 

 

 

I just added the pinnedContainer as a parameter. 

 

I hope that helps. 

 

Thanks. This finally worked.

[Horizontal Scroll Trigger Section breaks Anchor links to content afterwards]

1 minute ago, Rodrigo said:

Hi,

 

There are a few things that are complicating this a bit more than expected.

 

One of them is the fact that the section you want to scroll to using the link resides inside the element being pinned by ScrollTrigger, if possible move it outside that element.

 

Another issue is that the getScrollPosition helper is doing exactly what is supposed to do, is giving you back the end position of the ScrollTrigger instance, but the problem is that you have an extra element after the ScrollTrigger target and before the section you want to scroll to, so you have to take that into account as well when getting the position of that particular section.

 

I  tried a few things and so far moving the target section outside the pinned parent element and using offsetTop to get the position seems to be the only one that is working all the time:

 

 

 

I'd recommend you to keep only the elements that will be targeted by ScrollTrigger inside the section that will be pinned in order to keep calculations simple and easy.

 

Let us know if you have any other question.

 

Happy Tweening!

 

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?

 

 

[Horizontal Scroll Trigger Section breaks Anchor links to content afterwards]

4 hours ago, GreenSock said:

Yep, that's because you're using a regular link and the browser has no way to correctly calculate the position when pinning is involved. But don't worry - we made a helper function for this: 

https://greensock.com/docs/v3/HelperFunctions#getScrollPosition

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?

[Horizontal Scroll Trigger Section breaks Anchor links to content afterwards]

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?

See the Pen MWGRybO by tobimori (@tobimori) on CodePen