Skip to content

Instantly share code, notes, and snippets.

🎯
Animating!

Animoplex animoplex

View GitHub Profile
@animoplex
animoplex / CustomEasing.jsx
Created Apr 12, 2019
Custom Easing via Expressions
View CustomEasing.jsx
// Code reference borrowed from the Flow plugin for After Effects
// Buy it here: https://aescripts.com/flow/
/* ---------- Flow Function Declarations ---------- */
function customBezier(t,tMin,tMax,value1,value2,bezierPoints){if(arguments.length!==6)return value;var a=value2-value1;var b=tMax-tMin;var c=clamp((t-tMin)/b,0,1);if(!(bezierPoints instanceof Array)||bezierPoints.length!==4)bezierPoints=[0,0,1,1];return a*h(c,bezierPoints)+value1;function h(f,g){var x=3*g[0];var j=3*(g[2]-g[0])-x;var k=1-x-j;var l=3*g[1];var m=3*(g[3]-g[1])-l;var n=1-l-m;var d=f;for(var i=0;i<5;i++){var z=d*(x+d*(j+d*k))-f;if(Math.abs(z)<1e-3)break;d-=z/(x+d*(2*j+3*k*d));}return d*(l+d*(m+d*n));}}
/* ---------- Flow Function Declarations ---------- */
/* ---------- Flow Expression Template ------------ */
var startTime = 1;
var endTime = 2;
var startValue = value;
@animoplex
animoplex / EnhancedYouTubeEmbed.html
Created Mar 24, 2019
Enhanced YouTube Embed Code - Animoplex
View EnhancedYouTubeEmbed.html
<!-- Enhanced Youtube Embed Code for Motion Portfolios - Created by Animoplex
Features: Responsive-width player, removes tracking cookies, changes red controls to white, reduces YouTube branding
How to use: Replace the standard YouTube iframe embed code with the code below and add your YouTube video ID -->
<div style="width:100%; max-width:960px;">
<div style="position:relative; height:0; padding-bottom:56.25%;">
<!-- Video size ratio calculation: 1080px / 1920px = 0.5625 (16:9) -->
<iframe
style="position:absolute; width:100%; height:100%;"
src="https://www.youtube-nocookie.com/embed/YOUTUBEVIDEO?autoplay=1&amp;color=white&amp;modestbranding=1&amp;rel=0"
@animoplex
animoplex / LoopWithMarkers.jsx
Created Mar 7, 2019
Loop Animation With Markers - After Effects Expression by Animoplex
View LoopWithMarkers.jsx
// Loop Animation With Markers - Created by Animoplex: www.animoplex.com
// Repeat a property's keyframed animation, resetting the loop at the start of every layer marker
// Based loosely on Marker Sync Expression: http://www.motionscript.com/design-guide/marker-sync.html
n = 0;
if (marker.numKeys > 0) {
n = marker.nearestKey(time).index;
if (marker.key(n).time > time) {
n--;
} // get previous marker index
@animoplex
animoplex / Loops.jsx
Created Mar 6, 2019
Loop Expressions
View Loops.jsx
// Loop Expressions
loopOut("cycle", 0) // Repeat from start to finish, default loop mode
loopOut("pingpong", 2) // Loops last three keyframes back and forth
loopOut("offset", 0) // Repeats animation using last keyframe as new start point
loopOut("continue") // Does not loop, but continues onwards with current velocity
// loopOut evaluates from the first keyframe towards the layer outPoint
// loopIn can be substituted to evaluate from layer inPoint towards last keyframe
View LinearCounterbalance.jsx
// Linear Counterbalance
s = thisComp.layer("Control").effect("Slider Control")("Slider");
a = transform.position;
b = thisComp.layer("Null").toWorld([0,0,0]);
linear(s, 0, 100, a, b)
// Adjust a Slider Control (from 0 to 100) to balance between two values (a and b)
@animoplex
animoplex / LinearEase.jsx
Last active Mar 14, 2019
Linear & Ease Expressions
View LinearEase.jsx
// Linear & Ease Expressions
linear(time, outPoint - 2, outPoint, 100, 0)
ease(transform.opacity, 0, 100, 25, 75)
// Linear fade from 100 to 0 for the last 2 seconds of a layer’s duration
// Ease from 25 to 75 as the Opacity input animates from 0 to 100
View ValueAtTime.jsx
// Value At Time
thisComp.layer(index - 1).transform.scale.valueAtTime(time - 2)
// Output Scale of layer above, delayed in time by 2 seconds
@animoplex
animoplex / Value.jsx
Created Mar 6, 2019
Value Expression
View Value.jsx
// Value Expression
value / 2
// Current property value divided by 2
View PosterizeTime.jsx
// Posterize Time
posterizeTime(12); value
// Interpolates property at 12 fps regardless of composition frame rate
@animoplex
animoplex / Time.jsx
Created Mar 5, 2019
Time Expression
View Time.jsx
// Time Expression
time * 10
// Output increases by 10 every second
You can’t perform that action at this time.