Streaming live at 10am (PST)

How to make a scroll?


#1

I need the element not to appear until a certain position on the site. Once the person scrolled to the desired position, this element appeared. Most likely, this requires “opacity”, but what action after this - I do not know!

please tell me in person! Do not send video lessons. I watched them - just more confused


#2

Haha!

There’s a couple of ways, but I suggest using a primary parent Section as the target. Put your elements inside the Section, then add whatever you feel is best for your desired effect:

  1. Start off page & slide in view
  2. Start zero opacity to opacity 100%
  3. Start scale zero to scale 100%
  4. Start element under Section’s over hidden bottom to slide up into view

Just some options to use.


#3

I still did not understand.


#4

Right, but to understand you’ll need one of two things:

See a video and follow the steps - or - post your read-only link and someone can view your designer layout, to recreate - AND - then video will still need to be produced for your preview.

Either that, or you have to give someone your login, so they can do it for you. That’s really it.


#5

Is this the kind of effect you’re looking for?
http://forum-57416.webflow.io


#6

Hi @Bogette

Your request is similar in part to your query a few days ago - where text fades out and other text fades into view depending on scroll position. I’ve also used some offset in that example…(not sure if you saw my most recent post on it).


#7

Yes, something similar. Could you tell us how to do this?


#8

You can solve things in so many ways so this one is made quickly to show how it could be done. With other elements and design to take in consider maybe another solution is required.

So in this example, I made a div wrapping all content and made it 300vh high. The div that appears in the middle is set to an absolute position and pushed down about 42% from the top. I’ve used IX2 to hide/show it on scroll. The interaction trigger is set on the wrapping div and the actual interaction is set to the div itself.

Here’s the preview:
https://preview.webflow.com/preview/forum-57416?preview=9e0fab5f1b94ce006fff903effbdf359

Hope it helps a bit :grinning:


#9

Unfortunately it is a little not that I would like. Actually, now it seems to me that such effect of scrolling is impossible. Then the effect of emergence of the text necessary for me will be lost. But thank you for your help!


#10

Thank you for your help. Probably, you are right. The problem is that by means of lessons it is impossible to understand and see all opportunities of animation and scrolling. But I think that will learn it is it is necessary to try and study on own mistakes. Good luck!