Horizontal tween bgs bug

[Dennyno 39 Likes (Newbie)]

Hi all and welcome back. 🎉

What's wrong here?
Vertically works smoothly, while horizontally bg transitions got error... seem kinda working randomly lol... and not fetching the bg attr.

Thanks for any help

See the Pen eYeqjBO by DedaloD (@DedaloD) on CodePen

[GreenSock 18,264 Likes (Superhero)]

I don't have much time to dig into this but from a quick glance...

1. You're likely creating a bunch of overlapping/conflicting tweens because you're trying to animate the exact same property of the same object every time you enter or leave a section. So imagine when you go from a red section to an orange section...you leave the red AND enter the orange at the same time, thus it's trying to animate to red AND orange simultaneously. That's a logic issue in your code. You've gotta choose one or the other. My guess is you only need it to happen onEnter and onEnterBack.
2. I'd recommend setting overwrite: true or "auto" on your tweens to prevent conflicts.
3. With the helper function that's doing the smooth scrolling, you can't have the sub-ScrollTriggers also have a scrubbed value other than true due to order-of-operation challenges with the current version. Watch for the next release for some exciting news.

See the Pen popoPoN?editors=0010 by GreenSock (@GreenSock) on CodePen

[Dennyno 39 Likes (Newbie)]

Thanks!
Works like a charm on desktop, and nice to hear about the next update!

On mobile seems cutting the sections' right edge, or it's me?

Also 1 thing: how to enable the bg tween also for the first section?

Works for all except the first one, which actually comes suddenly from the blue one
 

[GreenSock 18,264 Likes (Superhero)]

16 hours ago, Dennyno said:

On mobile seems cutting the sections' right edge, or it's me?

I don't understand what you mean - it looks correct to me but I'm not sure what I'm looking for. 

 

16 hours ago, Dennyno said:

Also 1 thing: how to enable the bg tween also for the first section?

That's because by default the start is at "left left" and the first section is already there when the page loads, thus it fires. You could change it to start: "1px left" so that it needs another pixel to move first. I've updated my CodePen accordingly.