Streaming live at 10am (PST)

Adding intro effect on scrolling


#1

Hi, first i have to say that you're all doing a great job, Weblfow is really an incredible creation tool.

I want to add intro effect like this on my website:
http://tympanus.net/codrops/2014/05/22/inspiration-for-article-intro-effects/
Demo here:
http://tympanus.net/Development/ArticleIntroEffects/

Is it possible to add them as they are by entering some code in the custom code? If yes what i should copy/paste into it?


#2

yes, you can add your own custom code: http://help.webflow.com/adding-custom-code

BUT! You might want to play with something super powerful that comes with the designer tool. The interactions tool.

Check it out here: http://interactions.webflow.com/


#3

For this example, can you tell me what i should add? Sorry, but i'm a beginner..

Yes, i'm familiar with the interaction tool, but there is no trigger that correspond with "begin scrolling", in the demo, the animation is triggering with a sort of "delay", you know what I mean? (sorry if you don't understand, i'm french).

Also 3D modifications (like on the first demo) aren't available in webflow, are they?

I would love a parallax edition tool too!


#4

CSS3 3D tags and Parallax interactions are not yet implemented into the Designer tool (yet wink ).

But you can code them yourself in the custom code area.


#5

Ok thanks a lot! Have a nice day!


#6

http://interactions.webflow.com/

Example #2 shows what could happen when you scroll down to a certain area. You can learn from that example and instead of triggering something mid-way way down the page, you can trigger something to happen at the beginning of the page.

=)


#7

Yes, but for example, a want a sort of step on the scroll, i want that when the user start to scroll it only trigger the interaction and disable the scroll into the page until my interaction is done, like in this demo, is it possible in Webflow?

Here's an exemple of what I want to do:
https://webflow.com/design/embassy2?preview=aa5d32e17a910a9d64497fb64106d041

Press the down arrow and you will see what I want, the problem is that if you continue scrolling, it goes too low, that's why i need some "step" in the scroll.

Like in this site:
http://www.studio-songes.fr/fr/


#8