Pinned Horizontal Locomotive Scroll animation not working

[mauramirez]

Hello fellas!

 

I have an issue with a "Timeline" style layout and it´s driving me crazy!

Here´s the deal:
The page has to have vetrtical scroll but, when the timeline section appear it should be a "sticked" section with horizontal scroll, until there there is no problem at all, the problem begins when I want to show the items with the Locomotive animation for the horizontal section childs, as you can see in the "Pen" only the first ones  get the locomotive animation but the other ones not.

 

The effect that I want to achieve for the horizontal scroll is something like this

 

 

I hope you legends can help me to solve this problem.

 

 

See the Pen zYwzdzv by rmdesarrolloweb (@rmdesarrolloweb) on CodePen

[akapowl]

 

Welcome to the forum @mauramirez

 

4 hours ago, mauramirez said:

as you can see in the "Pen" only the first ones  get the locomotive animation but the other ones not.

 

Actually, I don't think that is the case. If you inspect the elements in dev-tools, you will notice that they all have transforms going on as you scroll but it appears that they are all being 'triggered' and proceeded pretty much at the same time.

 

I think the problem here is based on how locomotive-scroll's pre-prepared effects work in the first place combined with how you are altering the scroll of the page. The way I see it, locomotive-scroll can't know that you are fake-scrolling horizontally with a pin for some time - how should it -  and since all your elements are vertically (just about) in the same position, they will all be triggered and proceeded when locomotive-scroll detects that they vertically have reached a certain point of scrolling.

 

So if you want to trigger animations based on the position of elements within your fake-horizontal scrolling container, I would suggest doing so with ScrollTrigger - I'm not saying it will be the easiest thing to wrap your head around though. Because you are altering the flow of scrolling you will have to calculate when to trigger things yourself based on 

• the offsetLeft of the element itself
• minus a fraction of the window's width, depending on where in the viewport you want it to trigger
• multiplied by in your case even an 'offset' to consider since the amount of x-translation of your fake-horizontal tween and the scrubbing scroll-amount of the ScrollTrigger are not equal). 

 

There is a more detailed look on how to do something like that and about the 'offset' to consider in this thread here. I hope that will help a bit.