9d ago

Lottie (json) import issue

I have a json file that does not work correctly on Rive, and I also tested the file on Lottie Viewer, and it works fine. Testing in After Effect and Telegram (as a.tgs file), there are the same issues as rive not working correctly. and when I import it in AE, I see some expression code for Elastic. I don't know; maybe because of expression code, the animation does not work correctly.

And here is the Expression code

var $bm_rt;
var eff, amp, freq, decay, n, n, t, t, v;
try {
    eff = effect('Elastic Controller');
    amp = div(eff(1), 200);
    freq = div(eff(2), 30);
    decay = div(eff(3), 10);
    $bm_rt = n = 0;
    if (numKeys > 0) {
        $bm_rt = n = nearestKey(time).index;
        if (key(n).time > time) {
            n--;
        }
    }
    if (n == 0) {
        $bm_rt = t = 0;
    } else {
        $bm_rt = t = sub(time, key(n).time);
    }
    if (n > 0) {
        v = velocityAtTime(sub(key(n).time, div(thisComp.frameDuration, 10)));
        $bm_rt = add(value, div(mul(mul(v, amp), Math.sin(mul(mul(mul(freq, t), 2), Math.PI))), Math.exp(mul(decay, t))));
    } else {
        $bm_rt = value;
    }
} catch (e) {
    $bm_rt = value = value;
}

3 replies

9d ago

So I replace the elastic expression with a new one and export it to json with the new setting, as you can see in video and upload it to rive, which works fine but is weird in keyframe, as you can see, I don't know what the problem is.

and here is the New expression that i replaced.

// Smart Bounce 1.3 - After Effects Script
// Web: ukramedia.com/SmartBounce
// Code by Dan Ebberts (motionscript.com)
const smartBounceAnim = thisLayer.effect("Smart Bounce")("Animation").value;
const ampVar = thisLayer.effect("Smart Bounce")("Amplitude").value / 1000;
const freqVar = thisLayer.effect("Smart Bounce")("Frequency").value;
const decayVar = thisLayer.effect("Smart Bounce")("Decay").value;
const eVar = thisLayer.effect("Smart Bounce")("Elasticity").value / 100;
const gVar = thisLayer.effect("Smart Bounce")("Gravity").value * 100;
const nMaxVar = thisLayer.effect("Smart Bounce")("nMax").value;
let n = 0;
function elastic(amp, freq, decay) {
	if (thisProperty.numKeys > 0){
        n = thisProperty.nearestKey(thisLayer.time).index;
        thisProperty.key(n).time > thisLayer.time ? n-- : n;
	}
    t = n == 0 ? 0 : thisLayer.time - thisProperty.key(n).time;
	if (n > 0 && t < 1) {
        const v = thisProperty.velocityAtTime(thisProperty.key(n).time - thisComp.frameDuration / 10);
        return thisProperty.value + v * amp * Math.sin(freq * t * 2 * Math.PI) / Math.exp(decay * t);
	} else {
		return thisProperty.value;
	}
};
function bounceBack(e, g, nMax) {
    if (thisProperty.numKeys > 0){
        n = thisProperty.nearestKey(thisLayer.time).index;
				thisProperty.key(n).time > thisLayer.time ? n-- : n;
    }
    if (n > 0) {
        const t = thisLayer.time - thisProperty.key(n).time;
        const v = -thisProperty.velocityAtTime(thisProperty.key(n).time - .001) * e;
        let vl = thisLayer.length(v);
        const vu = thisProperty.value instanceof Array ? (vl > 0) ? thisLayer.normalize(v) : [0,0,0] : (v < 0) ? -1 : 1;
        let tCur = 0;
        let segDur = 2 * vl / g;
        let tNext = segDur;
        let nb = 1; // number of bounces
        while (tNext < t && nb <= nMax) {
            vl *= e;
            segDur *= e;
            tCur = tNext;
            tNext += segDur;
            nb++
        }
        if(nb <= nMax) {
            delta = t - tCur;
            return thisProperty.value +  vu * delta * (vl - g * delta / 2);
        } else {
            return thisProperty.value
        }
    } else {
        return thisProperty.value
    }
};
[elastic(ampVar, freqVar, decayVar), bounceBack(eVar, gVar, nMaxVar), thisProperty.value][smartBounceAnim - 1];

9d ago

and why I have just 3 layer in AE but a lot layer in rive

9d ago

and here the json files

24 days warranty.json

15 KB

24 days warrantly (with new expression).json

60 KB