Scrolltrigger and Locomotive scroll

[AllenIVe]

Hi Guys!

I have been struggling for a while on this animation, I have made many attempts but without success.

 

Now i need your help!

 

I have a scroll slider and need to change the background image based on active years tiles, like this reference but in horizontal mode...

 

Anyone can help me? I need to set active class on years tile and fade in / out the img in slider-years 

 

Thanks in advance!

 

 

 

See the Pen bGwbgQo by IveSix (@IveSix) on CodePen

[ZachSaucier]

Hey Allen. I'm not understanding what you're trying to accomplish. You say you need what the demo does but horizontal... but it is already horizontal? Can you please try to clarify your goals?

[AllenIVe]

Hey Zach, thanks for your reply!

 

I forgot to include the reference 'http://clapat.ro/themes/rayden/index-showcase-sticky.html' ,in this example the effect is vertical, i need the same behavior but on horizontal...  i'am not able to add on the right moment active class on .panel a,  and change in the same moment the slider-years--img img. 

 

Any suggestions?

 

[AllenIVe]

On 11/25/2020 at 12:37 AM, ZachSaucier said:

Hey Allen. I'm not understanding what you're trying to accomplish. You say you need what the demo does but horizontal... but it is already horizontal? Can you please try to clarify your goals?

 

Thee markets are in bbad position too, i can't understand why, can you help me ? 

 

Thanks

[akapowl]

4 minutes ago, AllenIVe said:

Thee markets are in bbad position too, i can't understand why, can you help me ? 

 

Hey @AllenIVe

 

They are, because you set horizontal to true, when in fact you are not scrolling horizontally, but vertically and just mimicing a horizontal scroll.

 

Just remove the horizontal: true on your ScrollTrigger(s).

 

Cheers.

Paul

[AllenIVe]

4 minutes ago, akapowl said:

 

Hey @AllenIVe

 

They are, because you set horizontal to true, when in fact you are not scrolling horizontally, but vertically and just mimicing a horizontal scroll.

 

Just remove the horizontal: true on your ScrollTrigger(s).

 

Cheers.

Paul

Thanks for the fast reply, this works for the markets, but toggle enable doesn't work too. 

 

Trigger gives the enable class on all elements together and remove it on the same times on all elements

[AllenIVe]

i just follow this example > 

See the Pen NWNaxwj by ihatetomatoes (@ihatetomatoes) on CodePen

[akapowl]

 

That example you posted is quite different from what you have.

 

What I can tell you, is that you have to consider quite some things, like for instance the offsetLeft of each of your panels when setting the start and end of those, because of the fake horizontal scrolling you are doing.

 

In the following demo I just threw that in there to show what I mean - and I am aware that this is in no way what you want, but doing the calculations for you and wrapping my head around what all else there is to consider for those calculation is too much for me now, sorry.

 

See the Pen 18a2042bcd9e82c2061d1b93cbbafbbe by akapowl (@akapowl) on CodePen

 

 

Because you are faking the horizontal scroll, what you would have to consider, when setting the start and ends correctly in a way that you have things set up,

can become quite complex, because for example the values in the start and end of your ScrollTrigger for the panels refer to the height of the panels and the top and bottom of the window but you'd actually have to somehow get to those values working for the horizontal axis.

 

 

[akapowl]

 

If you do not particularly need the toggling of the classes (and I think for what you want, you probably don't) here is a simpler approach, that I think you might have had in mind all along, but didn't work, because there were some things off in your setup.

 

For instance, you had set opacity: 1 !important to the .last-image - the one with the highest z-index out of those four images you have. Thus, no matter how much you were tweening on the opacity of the images, this one would always have been sitting in the foreground with an opacity of 1 and thus blocking all other images.

 

I removed that - instead I added a class of .first-image to your first image set to an opacity of 1 !important via CSS to make sure that image is visible, whenloading the whole thing (otherwise it wouldn't have been because you are using a .from()-tween on the opacity of the images).

 

I did the same for the first of your panels - added a class of .first-panel to the first 'a' there.

 

Then the last thing i basically did was to set the amount of the staggers you have to 1.0, so they stagger along the whole duration of scroll.

and just to add more contrast between the background-images and your for groundtext in this demo, I added opacity: 0.5 to your .slider-years--img in CSS.

 

All that results in this

 

See the Pen 4e52d8000350d171a7cbb2d6f4b56e16 by akapowl (@akapowl) on CodePen

 

 

Is that where you wanted to land on?

 

Cheers,

Paul