How to Change background image on horizontal scroll ?

[Rajan]

I am trying to change the background image every-time the screen snaps to new section horizontally.

In real implementation it is only changing the once for first section (probably because marker hits there only once while vertical scroll)

Is there anyway to set horizontal marker change position in scroll trigger to trigger something while reaching past some value horizontally..

Or any other alternative to get the effect working.  

See the Pen OJxmeBv by Rajan4436 (@Rajan4436) on CodePen

[OSUblake]

Hi Rajan,

 

You can't animate a background image url. You can only set it, and you don't need to include the css object wrapper.

tls0.set('.device', { 
  backgroundImage: "url(https://images.unsplash.com/photo-...)"
})

 

But that's probably not a good idea as there may be a delay due to loading. It would probably be better to stack all your images on top of each other and then fade out the old one and fade in the active one.

 

If you're looking to change stuff with the horizontal fake scrolling, you should definitely look into the new containerAnimation feature.