[CSS postion: sticky elements broken when ScrollTrigger in use]

Hi!

 

I'd need to use some sticky elements on my site but the problem is, that when I use some ScrollTriggers with snapping the whole page, my position: sticky elements are broken even if they have nothing to do with other animated elements. I understand why this happens but I wonder maybe there is some known workaround to fix this. 

 

Please see the demo.

 

Thank you!

See the Pen yLwroLm by Reinis-Meulis (@Reinis-Meulis) on CodePen

[ScrollTrigger start point wrong calculation if parent pinned]

Ok, I rewrote the logic of assigning timelines to elements and now the pinnedContainer param works fine too. Thanks @akapowl!

[ScrollTrigger start point wrong calculation if parent pinned]

I was trying to use that pinnedContainer before starting this topic and it had no visible effect on this in my actual project. Dunno why. 

[ScrollTrigger start point wrong calculation if parent pinned]

Thanks @mvaneijgen!

It works as expected now.

I will have to adapt it quite a bit as in my project I have multiple types of sections and animations for them and they can be used or not used in any order on each page but that's doable. 

[ScrollTrigger start point wrong calculation if parent pinned]

Greetings!

I have run into this problem which seems quite trivial but I cannot find a solution. Please take a look at the demo. As you see I have a whole page wrapper pinned for two animations, the first one happens as expected but the second one I want to be started at a position of "center center" happens to start 500px earlier which is the duration of the previous animation. Is there any chance to take that duration into account when calculating the starting point of the second animation?

Thanks in advance!

See the Pen yLwKoEV by Reinis-Meulis (@Reinis-Meulis) on CodePen

[Sprite sheet animation shaking when scaled on Firefox]

Hi again!

 

I tried a few examples and unfortuneatly, there's nothing with either png size or encoding.

 

First - we can't notice shaking on Diaco's example because this Santa alredy has all edges moving. I tried to chop off a part of it and then you can see this shaking very clear.

 

Second - this shaking is not happening if result of frame width multiplied with resize ratio is round number. So - if frame width is 150px and you scale it by 0.5, it's ok, but if you try 0.51, it shakes.

Check it all here:

See the Pen azWgRO by anon (@anon) on CodePen

 

So at this moment a have no idea how to solve it with the sprites we have.

[Sprite sheet animation shaking when scaled on Firefox]

Thank you, Diaco!

 

Seems that I have to investigate that png and make it better. Will do!

[Sprite sheet animation shaking when scaled on Firefox]

Hi!

 

I'm trying to scale a sprite sheet animation, it works fine in IE, Chrome, Opera and Safari, but it has ugly shaking when scaled down in Firefox.

 

You can see it here:

 

Any ideas how to solve it?

 

Thanks!

See the Pen Wbjgmv by anon (@anon) on CodePen