I have watched the Parallax Movement on Scroll video which makes it seem so easy.
Are there more in depth tuts? I have some Interactions I’d like to add to my site but am failing. Some more walkthroughs out be helpful but I haven’t found anything yet.
I have a div that I’d like to fade to 0% opacity on scroll out, and fade back to 100% on scroll in. I can (kind of) get it to fade out but not the other and it seems to fade out then back in too…
thanks
Which interaction did you choose for the fade effect? I found they can trip you up with the name of the initial trigger. To me, in my quirky brain, page scrolled made more sense that scroll into view; and vise-versa for something else. The terminology can be the problem, not your interaction logic.
On the section that has the image (map) I added a Scroll Into View interaction.
When Scrolled into View I added a Timed Animation to the map image (to hide map with opacity from 100% to 0%)
and When Scrolled Out of View I added a Timed Animation to the map image (to show map opacity 0% to 100%)
And I tried swapping them…
Hi @caspian, check out this tutorial: https://university.webflow.com/lesson/scroll-progress-indicator-interactions
instead of a scroll progress element, you can set the opacity of the map class when the page scrolls down to a certain point, and then back to the original opacity when the page scrolls up to a certain point.
I would try that, it looks like your page elements are absolutely positioned, so there does not actually seem to be much scroll on the page now.
Yeah as @cyberdave said, it’s hard to tell with no separation. Add a much larger height so we can get a better view. So at the Top of Screen you added 100%, then 0% at the bottom of screen right?
Here’s the challenge, your image is into view on page load. I would adjust the actions:
Would that make sense?
It’s separating the animation, so the image has it’s own. The Scroll Into View simply copies that effect.
Let me know what you think.
I removed much of the content below but goddamit Cyberdave you are a legend. 3 hours I went round and round getting frustrated and in a sentence you made it all better. Thanks mate!
Still have other questions though… but this will tide me over for a moment. thanks again
One more thing, if you are looking to animate absolute positioned objects in a way where all sections etc are flying in based on a very long page scroll, one trick I have used is to create a bunch of transparent full page sections, that can be linked to, or scrolled to, and you can still animate fixed or positioned objects.
See an example I made that uses this technique: https://webflow.com/website/Just-A-Space-Carousel
I visually added the section borders so you can see that. The play and rewind buttons simply scroll the page to the end and start sections that are below other content.
I hope this helps to give you an idea.
This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.