Friction Tips meta-thread

[samytichadou]

As friction matures toward v1 stable, i thought it would be cool to have a place to share clean tips with other users, so here it is.
You can also find them in the unofficial discord

[samytichadou]

Alpha (transparency) masking between layers (after effect track matte)

friction_tip_01_alphamasking.mp4

Here is a quick tip to have alpha channel (transparency) of a layer masks another layer in friction.
After effect equivalent (track matte) : https://www.youtube.com/watch?v=zgbXGqYMxq4

• setup two layers, one mask (above) and one to be masked (below)
• group them together
• set the mask (above) blend mode (math operation between this layer and layers below) do DstIn to have it "cut" through the entire composition using alpha (transparency) channel
• to limit the effect to the layer(s) in the group only, promote the group to layer, so the blend modes would not be retain outside of this group, interacting with the rest of the composition. Now the group is not visually interacting with the rest of the scene anymore, like a "scene in the scene".

Here it is ! you can now move freely your group while maintaining any in out animation you made !

A good idea could be to setup custom properties and expressions to be able to control the mask from without the group, and use this group as a template (for in out titles for example)

Happy frictionning ! :D

[AlmostMikhail]

Nice work but I would suggest you put in terms the layman can understand because not everyone understand what are layers and alpha. A easy to understand like "how to make these things appear and disappear". Something like that. Only the most advanced will get it quickly but will take some time for beginners

[samytichadou]

Nice work but I would suggest you put in terms the layman can understand because not everyone understand what are layers and alpha. A easy to understand like "how to make these things appear and disappear". Something like that. Only the most advanced will get it quickly but will take some time for beginners

Thanks for the feedback, i just updated the text, but i do not totally agree with you. The tips here are not only for beginners, but anyone using friction. And being "tips", it implies you want more out of the software (which you are already using), so they are not for first time users. And if you are a first time user and do not get the terms, you can follow along the video, and get the terms with this support.

And lastly, for the terms themselves, i can agree with "alpha" (transparency), but not "layer", it is self explanatory giving friction is a layer-based software. If not, a simple web search gives the key to that, but most user here (foss niche software) would have used a layer based software before (photo editing, design, video editing...)

But you are right, a beginner tutorial serie would be awesome about friction, especially with v1 around the corner, but i don't have the time for now, so here are some quick tips :)

[samytichadou]

Making a path appears progressively (after effect trim path)

friction_tip_02_reveal_stroke.mp4

Make a path appears progressively by triming it, using the sub-path effect.
Equivalent to After Effect trim path effect (https://www.youtube.com/watch?v=b0SopiH1nms)

• Path effects are not active by default on path-based layer. To activate it and add the desired effect, you can right click on a layer -> actions -> Path effects -> select an effect (here select the sub-path effect). Path effects are now active on this layer, so you can right click on them in the layer properties to add another one if you want.
• You can now tweak the sub-path effect to trim the stroke (and the fill if there is one).

Some explanations about the effect logic :
The entire stroke length is equal to 100.
So if your min length parameter is set to 0, and your max length is set to 100, the entire path is shown, here some examples to understand it better :
Min = 00 / Max = 00 : nothing is shown
Min = 00 / Max = 25 : the first quarter of your stroke is shown
Min = 75 / Max = 100 : the last quarter is shown
The offset parameter change the "origin point" of your stroke, the 0 location

You can also play with this effect on outline, for text animation for example.

[rodlie]

Thanks for the mastodon posts 👍 They help promote Friction.

the layman can understand because not everyone understand what are layers and alpha

The target audience for Friction is artists, it's assumed they know the basics.

[samytichadou]

Thanks ! that is the point, i hope i can help with this part coming from an after effect profesional background !
I'll try to continue with quick tips and make a tutorial serie when v1.0 is out !
If you have some suggestions about tips @rodlie knowing the ins and outs of the software, do not hesitate to tell me :)

I also made an unofficial channel on peertube for the tips, and later the tutorials : https://makertube.net/c/frictiongraphics/videos

[samytichadou]

Hand draw a path with Automatic/Manual Fitting

friction_tip_03_draw_path.mp4

Friction allows user to hand draw a path with 2 modes :

• Automatic fitting : user can set Max Error (how far from the original curve the path is) and Smooth parameters, friction will try to adapt user's hand drawn curve accordingly
• Manual fitting : user draws a curve, then select some matching points on it to build the path with manual precision

Pick the one which better fits your need !

[samytichadou]

Use expression and current scene frame to create procedural animation

untitled.mp4

In friction, you can use the current frame number through expresions to create quickly and without any keyframe simple animations.

• Create a square to animate its rotation
• Open the expression editor by right clicking the rotation property
• In the Binding section, create a named variable for the $frame scene attribute : current_frame=$frame
• In the Calculate section, return this variable for friction to use it as Rotation value : return current_frame
• The square is now rotationg without any keyframe
• In the expression editor, speed up the rotation by multiplying the frame value with a number : return current_frame*100
• To control the rotation speed, use a custom property (dummy user-created properties), create a Speed property (activate layer's Custom Property through right-click menu, then add a single value property)
• Use it in the expression editor by binding it to a variable : speed=properties.speed
• Then use this variable as the multiplier in the Calculate section : return current_frame*speed
• You can now change the speed through this property !

[samytichadou]

Text effect, procedural text animations

ftx_light.mp4

Friction has a text effect system to create procedural text animations.

• Create a text, add a text effect to it
• Change some text effect parameter to affect selected text (opacity for example)
• Enter point mode to be able to change diminish points to select text to affect
• Smooth text selection with upper diminish points to create a falloff
• Different kind of effect can be added to affect selected text, raster effect like blur, for example
• Diminish points can be animated !

[samytichadou]

Manipulate animation curves

fcurv2_light.mp4

Friction allows user to manipulate an animation curve (movement over time) precisely with curve point handles !

• Setup an animation
• Switch to curve editor
• Select a parameter to show it in curve editor
• Select points (nodes) to interact with them
• By default, animation curves are segment lines (no handles available to smooth)
• Turning the curve into a segment curve will allow smoothing its nodes by manipulating handles
• Symetric node and Smooth node allows to have both tangent of a node aligned, automatically smoothed or not
• Corner node makes tangent of a node independent

[samytichadou]

Parent/Child tranform effect

friction_tip_07_parent_transform_effect.mp4

In friction, you can setup a layer to be the child of another one, to follow it, with the transform effect "Parent".
It is the equivalent of parent in after effect : https://youtu.be/TTvwkDAo964

• In transform section, add transform effect "Parent" to the child layer.
• In the effect, setup the target (parent).
• The layer is now a child of the selected parent layer.

If two "Parent" effects are used on the same layer, only the last one is taken into account.

[samytichadou]

Property linking with expression

friction_tip_08_properties_linking_with_expressions_LIGHT.mp4

In friction, you can use expression to copy property of another layer and make a "single property child".
This is an equivalent of After Effect properties linking : https://youtu.be/4Nv3FXcXiBI

• Set expression for child's property (here we are using translation for the example)
• In Bindings section, get the parent property as a variable
  NamedVariable = ParentName.transform.translation.x
• Return this variable in the Calculate section to use it as the new value
  return NamedVariable
• Repeat that with both axis if needed
• Child's property is now the same as the parent's, but it cannot be changed by the user anymore
• To prevent that, you can use $value to get the user-defined value of the property, and add it to the parent's property in the Calculate section
  NamedVariable = ParentName.transform.translation.x
CurrentValue = $value
return NamedVariable + CurrentValue
• Do it for both axis if needed, you should be able to control the child's property while it is still copying parent's property

[samytichadou]

Track (point toward) transform effect

friction_tip_09_track_transform_effect.mp4

Friction has the ability to make an object points at another automatically. This is the Track transform effect

• In the transform section of the child object, add transform effect Track
• Setup its Target
• The child now automatically points toward the target

[samytichadou]

Visibility Range

friction_tip_10_visibility_range.mp4

Friction allowed layer to have Visibility Range, to limit in time their visibility in the render.

• In the right click menu of a layer, you can toggle visibility range to activate it. The color block represents the frames of visibility for the layer.
• This color block can be adjusted (trim and drag) to set this range. Keyframes would be moved accordingly.

[samytichadou]

Link (nested) Scene

friction_tip_11_link_scene.mp4

Friction allows user to link a scene (composition) in another scene. This simplifies the use of pre made animation in a complex scene.

This is similar to pre composition or nested composition in after effect

• Create two different scenes (let's call the final one "parent" and the other "child")
• In the parent scene, right click in the viewport and use the Link Scene button
• The child animation is now in the parent scene, and acts as a classic video layer. You can toggle its Visibility Range to move animation in time
• If the child animation is bigger than the scene canvas, you can use the outside pixels in the parent scene or not by toggling the clip checkbox in the layer properties, acting like a classic video layer or a procedural use of separate animation

[LPS-github]

This is incredible! I hope that at one point this can be simplified a bit and also that the Scenes will be shown in the Assets browser (like precomps) to make opening, editing them more intuitive, right now they seem a bit hidden. A double click to open the other Scene would be so much faster as well.

[samytichadou]

Path Operations

friction_tip_12_path_operations_LIGHT.mp4

In Friction, you can combine different path through path operations. They are also known as boolean operations.

• Select two Path Layers
• In the topbar menu, in Path category, select an operation
• You can use Union, Difference, Intersection, Exclusion, Division operations
• You can also Combine or Break Apart to combine separate Path Layers into one, or break a Path Layer with multiple Paths into separate Layers

[pgilfernandez]

Hi @samytichadou,

Your support and effort are gorgeous, thanks!

Last few weeks @rodlie and me have been prepping the very first version of the official Documentation. I would say we reached the very first version and, meanwhile you have been posting here I felt like you may want to aim your efforts into helping on this documentation better. I also think you will find more tips and tricks and techniques you haven't explored yet so, have a look at what is already merged and my pendings PRs that still haven't been reviewed but contain pretty good Friction stuff.

Once you see that you may consider help us make them richer and more complete in explanations and examples. You don't need to compile anything as we are just working on the Markdown files (and media files, indeed), the rest will be converted automatically and tweaked by @rodlie.

I hope you at least like what we have been doing there 😉
Cheers

[samytichadou]

Hi @samytichadou,

Your support and effort are gorgeous, thanks!

Last few weeks @rodlie and me have been prepping the very first version of the official Documentation. I would say we reached the very first version and, meanwhile you have been posting here I felt like you may want to aim your efforts into helping on this documentation better. I also think you will find more tips and tricks and techniques you haven't explored yet so, have a look at what is already merged and my pendings PRs that still haven't been reviewed but contain pretty good Friction stuff.

Once you see that you may consider help us make them richer and more complete in explanations and examples. You don't need to compile anything as we are just working on the Markdown files (and media files, indeed), the rest will be converted automatically and tweaked by @rodlie.

I hope you at least like what we have been doing there 😉 Cheers

Thank you for pointing me into this direction, i don't have a lot of time right now, so easier to me to make these quick videos, but i'll try to take part in the documentation, seems a nice way to contribute to Friction without coding :)

And thanks a lot for your work on this software, which is really needed right now in this domain (according to me :) )

[LPS-github]

I second that! These tips are incredibly valuable and in a large part the reason I've started to committed to learning Friction2d, after several rough starts:). TBH I had no idea how powerful it was!

[samytichadou]

Import/Link external files

friction_tip_13_link_import_LIGHT.mp4

Friction allows user to use external resources (as .svg file). There are 2 ways of using them, Import an Link. Let's see the differences.

• Importing a file lets the user modify the resulting layer. No link with the original file will be kept. The resulting layer will not be associated with an Asset (external file representation in Friction).
• Linking file allows the user to keep the link with external file : if a modification happens, it will be reflected in Friction once the Asset is reloaded. The resulting layer will not be editable in Friction.

[rodlie]

Hi all,

Been busy with work this week, so not been active... Anyway, I adapted the first video to the website:

https://friction.graphics/quicktips/quicktip-alpha-masking.html

Source: https://github.com/friction2d/friction2d.github.io/blob/main/_posts/2025-01-29-quicktip-alpha-masking.md

[samytichadou]

Note that I directly link to the videos posted in this thread, should probably not do that, but it works and avoid wasting space in the doc repo

Yep i get that, if you're ok with that, you or I could create an "official" friction account on a solid peertube instance to put these somewhere safe, without wasting space ?

[rodlie]

Let's just try using the videos from this thread for now, then find a proper way to do it later (famus last words) 😄

Did some changes to the website

• https://friction.graphics/news/
  • Will now show all post, including the quick tips
• https://friction.graphics/releases/
  • Only releases
• https://friction.graphics/quicktips/
  • Only quick tips

Also added 'Documentation' to the menu and merged a bunch of changes from @pgilfernandez

[samytichadou]

Let's just try using the videos from this thread for now, then find a proper way to do it later (famus last words) 😄

Did some changes to the website

* https://friction.graphics/news/
  
  * Will now show all post, including the quick tips

* https://friction.graphics/releases/
  
  * Only releases

* https://friction.graphics/quicktips/
  
  * Only quick tips

Also added 'Documentation' to the menu and merged a bunch of changes from @pgilfernandez

Perfect let's do that ! i'll keep posting here, do not hesitate to tell me if you prefer pr to the doc/site repo !

[rodlie]

Sorry about the late reply, had to take a day off.

Will add the existing tips, then you can add new PR's if you want.

[samytichadou]

Sorry about the late reply, had to take a day off.

Will add the existing tips, then you can add new PR's if you want.

Perfect, will do !
np, of course, enjoy your weekend !

[samytichadou]

Stepped noise expression

friction_tip_14_stepped_noise_expression_light.mp4

Create an expression (on the rotation of an object for example).
Use wiggle preset as base, put time variable at the end of the calculate section, after variables and before result ("return" line) and uncomment the expression to use the second process option (which uses time as an input).
Remove unused fps binding from Bindings section.

Change time variable to divide current "frame" with "frame_step" variable :
time = frame / frame_step;

Declare the frame_step variable and give it a value (5 for example) :
frame_step = 5;
This means every 5 frames, the random value will change.

Time decimal changes every 5 frames, for example :

• Frame 1 : 1.0
• Frame 2 : 1.2
• Frame 3 : 1.5
• Frame 4 : 1.7
• Frame 5 : 2.0

Just round the time variable to get the stepped effect :
time = Math.round(frame / frame_step);

• FRAME 1 : time=1.0 - time round=1
• FRAME 2 : time=1.2 - time round=1
• FRAME 3 : time=1.5 - time round=1
• FRAME 4 : time=1.7 - time round=1
• FRAME 5 : time=2.0 - time round=2
  This rounded value makes the noise change.

Tweak variables to get the desired effect.

Resulting expression :

Bindings

frame = $frame;
value = $value;

Calculate

frame_step = 5;
frequency = .3;
amplitude = 30; // pixels
seed = 0; // randomize the start, integers works better
detail = 4;

time = Math.round(frame/frame_step);
return value + noise(frequency, amplitude, seed, time, detail);