Smooth Background Transitions with Interactions 2.0

https://trm-assets-copy.webflow.io/background-transition

here is the live site. It works.

the above link is all of the different pages I’ve been working on including sliders ect.

go to the background transition page

image.png

let me know what isn’t working cause it all seems operational from my end.

@jbleroux

Thanks for the share!

I was hoping if you could help me resolve some issues I am having

The last bg div is displayed first on the page’s first load

I can’t seem to get the bg to transition to the next bg until I scroll to the bottom first then back up. Then I the bg’s change as they should until the page refreshes.

Any tips on how to fix this?
https://preview.webflow.com/preview/test1-8360c2?utm_source=test1-8360c2&preview=fa3719b0ba68efed92fc317783a463a5

Thanks!

Having the exact same issue. Not sure if its a bug. It started happening on a new site yesterday. Im going to relook at it today.

Jeremy

Hi Thanks That makes sense now, I can make the transition work but can you help I am trying to get it to transition sooner from the first section in to the 2nd, yours seems to but I can’t work out how, any hep much appreciated.

https://preview.webflow.com/preview/fergs-groovy-project?utm_source=fergs-groovy-project&preview=64852a11b9b4d6e856bfdded4dd269f4

First off, how did you get it to work. The new one for my site I created doesn’t transition back from 2nd section to the hero. Did you just redo the bg div sections? I’m thinking that is my best bet.

As far increasing decreasing transitions I have to play around and tweak it. if you want more of an instant effect you could reduce the transition time on the opacity to 0s. Might be startling. THere doesn’t seem to be any specific setting it is more by feel and I’ve been playing around with Margins between sections to help change where a scroll begins.

That also might be giving the impression the bg is changing faster because there is actually a larger scroll in the transition. For instance. I started adding 500pc margin on the bottom of each section to see the difference it would make.

Not sure any of that is helpful or not.

feel free to reach out directly by message as well.

always
Jeremy

@f100
Maybe try adjusting the offset and the opacity duration?

@jbleroux
I copied f100’s settings and I was able reproduce the same effect.

I have my read only link if you wish to view it.

https://preview.webflow.com/preview/test1-8360c2?utm_source=test1-8360c2&preview=fa3719b0ba68efed92fc317783a463a5

@jchan yeah it is bizarre my original test works as well. I think it is a bug webflow is looking into I think the solution is to redo that section by copying from my test over. I’m sure I can get it to work that way. I would have just liked to know how it broke in the first place. Whether it was with a bg video or doing combo classes. But there doesn’t seem to be any rhyme or reason. My original test always worked and still does.

Hi there! Im trying to recreate the Nelson tutorial for smooth bg transitions Background scroll interaction in Webflow | Tutorial - YouTube , followed step by step but is not working for me neither. What im doing wrong? try other options but nothing happens. when i try to setup the show bg animation I cant preview hitting Play button on the timeline. The background images persist without changes. Try also the matthewpmunger approach but didnt work. Any help to solve it? thanks in advance

RESPONDER

Hello @agiannotta, can you share your read only link?