[Nick Mara]

I’m literally in shock right now.

Unbelievable.

I’ve just tried your expression and it works like magic

I couldn’t be happier with the result and I still can’t thank you enough for everything you’ve done.

I hope you had fun trying to fix this troubles and always finding the right solution.

Well, you are great Andrei, thank you for taking the time to dive into this project and helping me out.

If there’s anything I can do for you, please let me know

[Nick Mara]

Just the fact that you said that this is certainly doable it’s already something for me.

I hope you will find a bit of time to dive into this project again and finish this set up.

I’m really curious to know what will be your unusual and smart solution.

I have total respect for you and I know bills come first so thanks a lot for your precious time.

So, we’ll talk soon

[Nick Mara]

Hey Andrei,

do you think is there any chance to do this last step?

I think that it would be really interesting to have all those abilities on just one path.

Let me know what you think, I would be really happy to know your opinion

[Nick Mara]

Oh I forgot to say that I would also like to be able to choose from which point the path starts to unbild itself.

So now the controller are:

1 – A slider control which drives the starting point of the path

2 – A slider control which drives the ending point

3 – A checkbox control which reverse the direction of the path

NEW ONE:

4 – A new checkbox which enables or disables the Path ability to build or unbild.

5 – A slider control which drives the point from which the path starts to unbild itself.

I hope this is not too confusing !

If this is not clear please tell me.

Thanks

[Nick Mara]

Yes, that’s exactly the behavior I want.

Checkbox OFF = Path building

Checkbox ON = Path unbilding

Does that makes sense?

Thanks

[Nick Mara]

The Path unbilding is an option.

I can enable it or disable it via the Checkbox Control.

It doesn’t have to start unbuilding after the whole path is loaded.

It should just keep the position and revert it’s building direction which means unbulding the path.

Watch this short video, I hope it helps you to better understand what I mean.

https://www.youtube.com/watch?v=RqAw_L3K494

Is it something possible?

Thanks

Some contents or functionalities here are not available due to your cookie preferences!

This happens because the functionality/content marked as “Google Youtube” uses cookies that you choosed to keep disabled. In order to view this content or use this functionality, please enable cookies: click here to open your cookie preferences.

[Nick Mara]

Hey Andrei,

I’d love to do an update to the project, could you please help me further more?

I wanted the path to be simultaneously a loading bar and a countdown bar.

To do so I copied and paste the same expression of the “End” on the “Start” property of the Trim Path.

Then I created a Checkbox Controller on the Null object controller, which works as a switch function.

When the Checkbox is turn OFF, the path is building up as a loading bar, when the Checkbox is turn ON, the path unbuild itself as a countdown.

Here is the video:

https://www.youtube.com/watch?v=uAHQgzZrqqY

This is the complete expressions set up:

NULL OBJECTS CONTROLLERS

Start_Point = Slider Control

End_Point = Slider Control

Reverse_Direction = Checkbox Control

Enable/Disable Loading = Checkbox Control

EXPRESSIONS ON THE SHAPE LAYER:

Path property:

cW = thisComp.width;
cH = thisComp.height;
corners = [[-cW/2,-cH/2], [-cW/2,cH/2],[cW/2,cH/2],[cW/2,-cH/2]];
startCorner = thisComp.layer("Null").effect("Start_Point")("Slider").value%4;
p1 = (startCorner == 0) ? [] : corners.splice(0,startCorner);
corners = corners.concat(p1);
if (thisComp.layer("Null").effect("Reverse_Direction")("Checkbox") == 1) {
	b = corners[1];
	corners[1] = corners[3];
	corners[3]= b;
	};
createPath(corners)

Start property:

if (thisComp.layer("Null").effect("Enable/Disable Loading")("Checkbox")==1){
function arrIncludes(arr, element) {
    for (var i = 0; i < arr.length; i++) {
        if (element == arr[i]) return true
    }
    return false;
}
L = thisComp.width;
l = thisComp.height;
percentL = 50 * L / (L + l);
percentl = 50 * l / (L + l);
beginPoint = thisComp.layer("Null").effect("Start_Point")("Slider").value%4;
stopPoint = thisComp.layer("Null").effect("End_Point")("Slider") % 4;
shortPoints = (thisComp.layer("Null").effect("Reverse_Direction")("Checkbox") == 1) ? [1,3] : [0, 2];
firstLInstances = Math.ceil(stopPoint / 2);
if (arrIncludes(shortPoints, beginPoint)) {
    theEnd = percentl * firstLInstances + percentL * (stopPoint - firstLInstances);
} else {
    theEnd = percentL * firstLInstances + percentl * (stopPoint - firstLInstances);
}
theEnd = theEnd == 0 ? 100 : theEnd;
linear(time, 0, thisComp.duration-thisComp.frameDuration, 0, theEnd)
}else{value};

End property:

if (thisComp.layer("Null").effect("Enable/Disable Loading")("Checkbox")==0){
function arrIncludes(arr, element) {
    for (var i = 0; i < arr.length; i++) {
        if (element == arr[i]) return true
    }
    return false;
}
L = thisComp.width;
l = thisComp.height;
percentL = 50 * L / (L + l);
percentl = 50 * l / (L + l);
beginPoint = thisComp.layer("Null").effect("Start_Point")("Slider").value%4;
stopPoint = thisComp.layer("Null").effect("End_Point")("Slider") % 4;
shortPoints = (thisComp.layer("Null").effect("Reverse_Direction")("Checkbox") == 1) ? [1,3] : [0, 2];
firstLInstances = Math.ceil(stopPoint / 2);
if (arrIncludes(shortPoints, beginPoint)) {
    theEnd = percentl * firstLInstances + percentL * (stopPoint - firstLInstances);
} else {
    theEnd = percentL * firstLInstances + percentl * (stopPoint - firstLInstances);
}
theEnd = theEnd == 0 ? 100 : theEnd;
linear(time, 0, thisComp.duration-thisComp.frameDuration, 0, theEnd)
}else{value};

I would like to make some variants of this frame where the stroke starts to unbuild itself not from the last point but for example from the third or second or first point.

Is there a way to make this possible?

Thanks in advance

Some contents or functionalities here are not available due to your cookie preferences!

This happens because the functionality/content marked as “Google Youtube” uses cookies that you choosed to keep disabled. In order to view this content or use this functionality, please enable cookies: click here to open your cookie preferences.

[Nick Mara]

Hey Andrei,

I’m trying to apply your expression on the “Start” property of the Trim Path.

function arrIncludes(arr, element) {
    for (var i = 0; i < arr.length; i++) {
        if (element == arr[i]) return true
    }
    return false;
}
L = thisComp.width;
l = thisComp.height;
percentL = 50 * L / (L + l);
percentl = 50 * l / (L + l);
beginPoint = effect("Slider Control")("Slider").value%4;
stopPoint = effect("Stop Point")("Slider") % 4;
shortPoints = (thisComp.layer("Loading_Bar_Control").effect("Reverse_Direction")("Checkbox") == 1) ? [1,3] : [0, 2];
firstLInstances = Math.ceil(stopPoint / 2);
if (arrIncludes(shortPoints, beginPoint)) {
    theEnd = percentl * firstLInstances + percentL * (stopPoint - firstLInstances);
} else {
    theEnd = percentL * firstLInstances + percentl * (stopPoint - firstLInstances);
}
theEnd = theEnd == 0 ? 100 : theEnd;
linear(time, 0, thisComp.duration-thisComp.frameDuration, 0, theEnd)

<div>

In this way the Stroke of the Shape Layer would unbuild, starting from 100 % and going down to 0%.

So it would work like a countdown.

Is there a way to make the countdown Path starting from a precise point of the shape?

I mean:

I would like to start the unbuilding of the Path from the first or from the second or from the third point not from the last one.

The chosen point could also be driven by a slider control, maybe the stopPoints property of the expression could be used.

I hope I was clear, if not please ask =)

Thank you so much

</div>

[Nick Mara]

Thank you so much,

the expression it’s working and you are always very helpful

[Nick Mara]

Hi Stephen,

Thanks for your answer !!

I put the first part of the expression on the “End” property of the Trim Path but I can’ t figure out where to put the boolean not operator: “!”

 if (! chkbx.value){

You wrote “For the other layer ” but the expressions are on the same layer not on two different layers.

Am I doing something wrong?

Thanks