Hi guys,
Does anyone know how to achieve this kind of effect done in web flow. Please see the example:
Hi @Andrius_Macikas, I can’t tell you the specifics how they coded this, I mean, you can look at the source of that page, and get the javascript in the all.js file (it is minified) but I believe the basic concept is:
- Create Time Lapse movie that is separated into many images
- On mouse move (or scroll, they are different events) in certain direction, change out the image used for the movie container on that page (which seems to be set also as a background).
This is advanced javascript, so you need to be a coder to do this, or have someone who is knowing how to code, do it for you or help you.
I hope that gives you some base to start doing some research. Generally, if you want to see how something is made, and no other instruction exists (or you do not know where it is located) then you need to look at the page source of the page you want to emulate, and try to figure out, what code they used, what script plugins etc… I have not yet seen a Webflow site that has this kind of effect, but you cannot do this using an built in Widget in Webflow at the moment, so you need to use Custom Code.
I hope that helps, Cheers ! p.s. It certainly is a cool effect, I will have to check that out too on my day off sometime and try to replicate it 
Hi cyberdave,
Many thanks for getting back in touch. I will have a talk with someone with coding experience. Let you know about the progress. Meanwhile if you find out the solution, please share. would be really cool to know how to make it.
cheers,
Andrius
@Andrius_Macikas, sure thing… I can’t promise any ETA though, but I am always interested to find out, how things work
That’s easy to do (I’ve done it already for one of my clients) if you know how it works.
The windows is cut into 80 pieces and based on the piece your mouse is on the proper image is loaded.
oh right… spot on… yeah cool… thanks @bartekkustra!
1 Like
bartekkustra big thanks. the genius of the simple:) great insight. can you please share your work? would be great to see because I am at the moment of collecting analising the techniques for my new project. promise to share mine also when it will be done. thanks.
It’s in the #madeinwebflow ;).
Once you there, go to the “company” and scroll down to images. Hover over 1/3, 2/3 and 3/3 of the photo and enjoy pure epicness of my scripts ;)
bartekkustra. Thanks for sharing yopur work. Have never though it could be used this way, but it looks really great. It just shows how broad is the creative spectrum of applying this kind of technique.