[Parallax images using SmoothScroller not working with ScrollTrigger pinned items]

Yes, that is exactly what I wanted. Thank you so much! I thought there might already be a method I was just missing, but it is a really random usecase so it makes sense there isn't 😅

[Parallax images using SmoothScroller not working with ScrollTrigger pinned items]

Hi there, I am trying to figure out how to make parallax images using SmoothScroller work with ScrollTrigger pinned items. Currently, the pinned items work great, and if I remove them, both parallax images work great. Currently, the first parallax image works at random times, but the second does not.

 

I see it is being triggered at the wrong time due to the pinned items. I tried adding pinnedContainer to the ScrollSmoother, but that didn't work. Any ideas?

 

 

See the Pen bGLWXdJ by chailandau (@chailandau) on CodePen

[ScrollTrigger + fixed item positioning with variable content height]

This is a pretty specific question. I have a ScrollTrigger perspective animation running. It works perfectly. My issue is, I have some content that changes height depending on if the user clicks a certain button. ScrollTrigger refreshes, so that's not a problem. My problem is I want the animated item to end its animation at a certain hard point and remain fixed until the endTrigger. Right now its all based on the content height, which is changeable. 

 

In this example, what I want to happen is:

1. In default view, user scrolls to bottom of blue section and triangle is done its animation and then disappears.
2. If user selects extra space, user scrolls to bottom of blue section. Checkmark finishes animation where it would have in the default view space. It stays fixed until user reaches end of sections and then disappears.

 

It seems like I need to be able to define a stopping point for the animation and then separately a disappearing point. This would work in the 2 scenarios, because I want them both to stop at the same time, I just want it visible longer when there is extra space.

See the Pen gOvmvoW?editors=1010 by chailandau (@chailandau) on CodePen

[DrawSVG forEach not working as expected]

Perfect! I didn't realize I had to also pause ScrollTrigger, but that makes sense. Thanks a bunch

[DrawSVG forEach not working as expected]

Yes! I initially had a global timeline that paused and that was the exact behavior I want. For example if it's paused and you scroll, I don't want new lines coming in and I want the current line paused mid-draw if applicable. If it's unpaused and you scroll, I do want them coming in.

[DrawSVG forEach not working as expected]

Ah ok, thank you! I had it a part of a much bigger function and forgot I had originally set the DrawSVG values to 0, that fixed it

Ok, so here you can see my actual problem. I want to be able to apply this DrawSVG affect in a ForEach loop, but I am having difficulties pausing it in one. I have a central pause button and I want to be able to just hit pause and access all of my instances in an array. I am having success adding an ID and pushing it to the array, but can't seem to figure out how to successfully pause. I tried using a timeline in the loop vs just a tween and didn't have much luck. It seems to sometimes pause once but then it won't play again, or similar issues where I can't get it consistent.

 

I can't use the global timeline because on my project I am using ScrollSmoother and that pauses everything. What am I missing? I also tried adding it to a master timeline, but then all the animations seemed to play at once as opposed to using ScrollTrigger. 

The behavior I want is similar to the global timeline where EVERYTHING pauses and then starts again based on the pause() and play() functions, but I want to be able to choose what it targets, hence the array.

 

See the Pen dydNwVL?editors=1111 by chailandau (@chailandau) on CodePen

[DrawSVG forEach not working as expected]

I was trying to create a minimal demo for a different issue I'm having but I can't even seem to get the demo working. It works locally on my machine with a similar setup, so I'm not sure what's wrong. Once I solve this I can continue onto the original problem.

 

The problem here is that I want to do a forEach loop and have all my SVG shapes draw in on scroll via ScrollTrigger, and its not working at all.

See the Pen dydNwVL by chailandau (@chailandau) on CodePen

[How to pin fixed item with ScrollSmoother active?]

I see, thanks a lot for this solution, I guess I thought there was a simpler way of doing it but appending makes sense

[How to pin fixed item with ScrollSmoother active?]

Sure, I created this which is what I am trying to accomplish:

See the Pen gOvLMBO by chailandau (@chailandau) on CodePen

 

Then I went back and did the same thing on the ScrollSmoother version, which seems closer, but still not there:

See the Pen GRQNqeR by chailandau (@chailandau) on CodePen

[How to pin fixed item with ScrollSmoother active?]

I haven't been able to find this exact scenario. I know I'm missing something, I tried cobbling together some things I saw on the forums.

 

Basically, I want the black box to be pinned as a fixed item via ScrollTrigger (that's why I have the trigger as the header, I just want it immediately pinned until I release it). 

 

Because I'm using ScrollSmoother I can't seem to have the item in a fixed position without being outside of the container, but I need it inside.

 

Any suggestions or directions to explore? Thanks.

See the Pen mdXOEJQ by chailandau (@chailandau) on CodePen

[Fluid SVG animation with filter + random duration flickering]

Oh shoot, lol, didn't even realize it wasn't working with the randomDuration. I think it was the filters, I ended up going a CSS route and then using ScrollTrigger to toggle the class. Thanks!

[Fluid SVG animation with filter + random duration flickering]

Hi, I'm trying to get a lava lamp like effect on these SVG elements using random durations. It works, but it keeps flickering. Is there any way to get rid of that?

See the Pen eYVdVLz by chailandau (@chailandau) on CodePen

[Possible to use ScrollSmoother on whole page where ScrollTrigger is pinning items?]

Brilliant, thank you! So glad I convinced my company to get me a license, you guys rock! It works now.

See the Pen jOZroyg by chailandau (@chailandau) on CodePen

[Possible to use ScrollSmoother on whole page where ScrollTrigger is pinning items?]

Hi, I am trying to implement ScrollSmoother on a whole page. I'm having issues because I want to smooth the same container that ScrollTrigger is using as a pin / pinContainer. Is this even possible? Desired behavior: smooth scroll whole page, pin the ScrollTrigger content correctly, continue smooth scrolling past it.

 

I also can't seem to get ScrollSmoother working on the whole page at all, even without the pins - it just removes the scrollbar. This is a newer plugin so I haven't seen much about this particular issue.

See the Pen gOvMyZo by chailandau (@chailandau) on CodePen

[ScrollTrigger - adding to class not working on multiple]

That was it, thanks so much! That makes sense now that I think about it

[ScrollTrigger - adding to class not working on multiple]

I've been running into this issue with ScrollTrigger, where a single instance of my array works, but multiple do not.

 

 

Here is one that works with only one instance:

See the Pen ExQyyMJ by chailandau (@chailandau) on CodePen

 

I've looked on the forums and not found anything that helped me, would love some insight!

 

Multiple instances do not work:

See the Pen LYQZZdK by chailandau (@chailandau) on CodePen

[Snap with horizontal ScrollTrigger]

Yes, I meant the left edge of the element to the left edge of the container. I do understand why that would be difficult. Would it help if the containers were pre-determined widths? The snapping functionality I am thinking of would work sort of like this:

See the Pen LYVygxW by nrifki (@nrifki) on CodePen

 

Is this possible using ScrollTrigger?

[Snap with horizontal ScrollTrigger]

Thanks for the link to the docs! I want to snap to the beginning of each element, even though they are not centered, is this possible? Gotcha on the width of the container, I will update that as well.

[Snap with horizontal ScrollTrigger]

Hello! I got horizontal scrolling working with ScrollTrigger. Is there a way to have it snap to each div? I tried inputting snap: "content-wrapper" but it just shot up to the page beginning when it hit it. I don't quite understand how snap works - I took it from one of the demos. I can't really find docs on it.

See the Pen WNoeNMm by cliquechicago (@cliquechicago) on CodePen

[Scroll Trigger - how do I achieve this wiping effect?]

Thank you both for your responses! This makes a lot of sense, I should probably figure out the animation first and then add Scroll Trigger. @mikel your solution looks great - my question is, how do I arrange this with a div containing an image, a background image, plenty of text. I would show an example, but it's for a work training project and I don't think I can share my code. It's a three column layout with text on two sides and an image with a background image set behind it. Is that too much content for this effect?

[Scroll Trigger - how do I achieve this wiping effect?]

https://curv.tumblr.com/

 

I am trying to use Scroll Trigger to get an effect like that. Is it possible? I have 3 divs with content (image, background image SVG, text). I want each div to wipe out and replace the previous div as you scroll, like the link I posted. How would I do this with Scroll Trigger?