Streaming live at 10am (PST)

Scroll down -> Animations like on Webflow main page


#1

Does anybody has an idea how to implement the fading pictures on www.webflow.com when scrolling down.
No problem doing this on hover or on click but there is no event like onVisible() ...

I appreciate any ideas and workarounds .

Greetings from Germany,
Flo


#2

Use search on forum.
http://viewport-animations.webflow.com

Already did it here. Once I find time I'll try to make a tutorial for that. So far I have few projects on my list...


#3

Hi @Flo (your name is so coooool!). We'll be implementing a flexible way to do things like this inside Webflow within the next couple months.

For now you can try adding something like this: http://stackoverflow.com/questions/1484467/fading-element-on-scroll in your Custom Code section (and replace the ID's or Classes with your own that you want to fade).


#4

@bartekkustra Hi, in the example you shared I see only show by scroll down animations. Is there a way to move elements by scroll? like here http://www.eatsprig.com/. and this would be a seriuos hard example I guess. https://onlycoin.com/
But maybe you can give me a hint how to build stuff like this.

thanks


#5

Possible but hard I think. I should try that some time smile Contact me over Skype, we'll figure it out. My contact details are in my profile.


#6

Hey @PhillipB we're working on a feature that will let you create the type of animations on www.eatsprig.com and some animations on www.onlycoin.com, but not the crazy scroll-based custom animations. I'm talking about making animations for certain elements while the rest of the page stays still (like in coin where the cards come together).

But I'm sure if you want to go super fancy you can incorporate something like this in your custom code: http://johnpolacek.github.io/superscrollorama/

Edit: One of our users used this as well: http://prinzhorn.github.io/skrollr/


#7

Thanks Sergie.
When can we expect that feature?
Next month or more end of the year?

Best,
Phillip


#8

Next month for sure. Maybe even this month.


#9

This might do some of what you're looking for in the mean time:
http://joelb.me/scrollpath/


#10

Wow.js combined with Animate.css should allow you to pull off some pretty cool stuff...

scrollReveal.js is another awesome animation/transition library...

I'm a newbie to web development myself... So I can't speak to how easily this can be integrated into Webflow. I believe it would require some kind of third party hosting of the css + js files...

I imagine the use of jquery/javascript plugins could be integrated in a much easier/cleaner manner once the Webflow team creates a method for uploading/hosting files with each site build. That combined with a function to somehow peak/edit the code would be awesome.

Btw, this is also my first post here... I haven't really had the time to dive into Webflow yet, but I'm really excited about its future. From a learning standpoint, this product combined with something like Brackets is a game changer.

I hope to one day use it in a workflow where I'll be able to build small-to-medium brochure type sites, export the code, then hook up the forms + a blog page to a CMS.

Of course, if this product ever introduces some kind of simple blogging type of features where you simply add some editable regions in the code & deem certain sections of code as "repeatable" (for blog/news pages) like found at CloudCannon or BarleyCMS then it would probably take over the world.

An all-in-one solution to craft completely custom sites without being handcuffed by any design restrictions, produces clean code underneath, custom styled forms work just the way you've designed them without any hassle, and finally - a method to simply add predefined php (or whatever crazy backend technology the cms platform would be built on) snippets into sections of the code to allow the client to update sections or a blog page on their own.

You guys have 3 of the 4 knocked out... here's to the future of web development - keep up the amazing work!


#11

Thanks @Mogeek! Glad to have you be part of the Webflow community! We're going to be building some crazy things together. smile


#12

For another solution, see my discussion here with another Webflow user. He nailed it in Webflow natively. http://forum.webflow.com/t/brand-radio-agency-in-paris-france-website/1640


#13