Streaming live at 10am (PST)

Scroll to Section Fade-into-view Transition - How to make sooner


#1

I followed the tutorial on how to have my section fade into each other. The issue i’m having is the transition happens a little too late. It seems to wait until the content is almost at the top of the screen before it will transition into the fade. Does anybody know how i can have it transition sooner into the opacity fade?

I thought that transiton would start as soon as Section 2 is into view at the bottom of the screen?

Here is my demo
https://preview.webflow.com/preview/portfolio-version2?preview=9a56408b8d486685be46f5ca22dccbf1


#2

Nice looking site already.

I’m not entering too much into details about how you implemented the scroll trigger, rather giving you a general strategy for this kind of trigger.

At the moment you set the interaction on a section, for example, because you want that section to have a transition interaction. And you realize it doesn’t happen exactly when you want too soon, too late…).

In order to fine tune those interactions, you need to fiddle with the offsets

But that’s not what I do or advise. Because it doesn’t make sense all the time and rather than really setting them up, you end up fiddling with them, trying numerous values to get an acceptable result.

Instead of doing that, I prefer to use dummy elements as triggers. Those dummy elements are just floating invisible DIVs. I make 20x20px divs, invisible, position:absolute, and I put the interaction on them. So I place them exactly where I want and when they reach the edge of the viewport, interactions fire up and affect what I’ve decided they affect (the sections).

So I have a disconnection between the interaction trigger and the interaction target. That’s easier to handle in my opinion, more precise, to the pixel, instead of relying to %age values.

Usually, all my dummies share the same class (ie: .dummy) and I make them a vibrant yellow or acid green color so they stand out. It’s great for placing them and test on publish, I always know where my interactions are. And when I push in production, I just give the dummy class a transparent color and they become invisible.


#3

Thank you for the compliment. I’m turning this into my portfolio hopefully if i ever finish the project. :wink:

I will give your advice a try, and let you know the results. I actually thought about the invisible div idea myself, but did not know if that would work. Oddly setting the offset for section 1 controls how quickly section 2 comes into view. I did not think it would work that way. Maybe i need a tutorial on how offsets work.