"I'm not a UA-camr." Well this was far more informative and straight to the point than some other UA-camrs can get to. Thank you so much for the tutorial!
for those who cant access, here is the code // customize speed, position and offset here var v = 100; //velocity var i = [0,0]; //initial position var o = 950; //time offset var f = (time+o) * v //function var t = [i[0]+f, i[1]+f]; //time x/y var d = thisLayer.sourceRectAtTime(); //dimensions var s = transform.scale; //scale var lw = d.width *(s[1]/100); //layer width var lh = d.height*(s[0]/100); //layer height var w = thisComp.width - lw; //screen width var h = thisComp.height - lh; //screen height // cycle count in x and y var c = [Math.floor(t[0]/w), Math.floor(t[1]/h)]; // position in cycle for x and y var p = [t[0] % w, t[1] % h] // cycle isOdd ? inversed : original var x = c[0] %2==1 ? w - p[0] : p[0]; var y = c[1] %2==1 ? h - p[1] : p[1]; [x + lw/2, y + lh/2]
the fact that you're still actively responding to comments to help people, on a 2 year old video is so amazing ❤ my question is, do you know how to make it end in a specific location? i'm assuming it's similar to how you'd have it start in a specific place, but i'm not too sure how to go about making it end where i want it to
Its been a while since i tested this code. But try setting: var o = -100 This is the offset variable and I think it may be able to use negative values. That way after 100 frames the logo should be at the start position (which will now become our end position) so if you know how long your composition is. Take the number of seconds and multiple by frame rate and put that number with a minus for the var o = (third line in expression) for example 20 second composition and frame rate of 24 would be var o = -480
Hey know this is a long shot to get a response, but I am trying to have this scale with each bounce. I've tried using a slider that grows with each bounce, placing an expression right in the scale, expression in the shape layer size but it all doesn't seem to work correct. By that I mean it is delayed on when it scales and it seems it's not looking at the layers new size correct, and rather the initial size. If I could get any help that would be awesome.
Probably accidentally just deleted some random charachter. Copy again from the site and see if it works. Double check that everything looks right and you followed the instructions.
@@jesperhustad Thanks for the response my man. Yes everyting looks right i really dont know waht it could be, does the composition size have to be specific or something else? Im trying to figure out what is wrong at line 9 but no luck.
hey dude You really explained this very well and super simply! The link in the description no longer works btw here's the code for anyone that needs it // customize speed and offset here var var v = 150; //velocity var t = 0; //time offset var p = (time+t)*v; //position var d = thisLayer.sourceRectAtTime() //dimensions var s = transform.scale //scale var lw = d.width*(s[1]/100) //layer width var lh = d.height*(s[0]/100) //layer height var w = thisComp.width - lw; //screen width var h = thisComp.height - lh; //screen height // isReflected ? inversed : normal var x = Math.floor(p/w)%2 == 1 ? w - (p%w) : p%w; var y = Math.floor(p/h)%2 == 1 ? h - (p%h) : p%h; [x + lw/2, y + lh/2]
Hey - found a bug in the Hue shift code on the link where the hue wasn't using the true width This meant after some time (say 20 minutes) the colour was often changing before the bounce. Pasted in the line of code too define the true width and frame count and this resolved the issue.
yo bro this is really cool thanks for help, else I had to follow after effects 20min tutorial and ends up wasting an entire day doin the most crazy shit
Hi! Thanks for this, super useful. I have applied this effect to 7 logos on my screen. Is there any way to make them all set off in different directions. At the moment they all move off in sync toward the bottom right of the screen. Thanks!
Not at my computer. But if You know a bit of coding here are the instructions. use seedRandom(index) to make the random number generator give a constant result for each layer So for example SeedRandom(index); var posX = random(width); var posY = random(height) var offset = random(10000) Most important is to just set the offset variable as a random number in big range. Ask chatGPT if you have any issues with the code.
How would I make it so it chooses a random direction each time it starts? I have a bunch of elements in the center of my composition, and I want to apply this script to each of them so that they all "explode" outwards in random directions
Very late response, but writing for anyone else looking in the future. This is the first after effects expression I have made so don’t quite know the best practice methods, but I will try anyways. When you copy paste layers it adds a number to the end. Write an expression that gets the current layers name, cuts everything except the last section with number, use the Random property and feed the layer number as the seed. You can then use these random numbers to set the random speed for each layer. Copy paste layer many times. Don’t have time to test and write it out, but that’s how I would solve it. Sorry for not answering earlier.
not sure if you still have eyes on this video - but would you happen to know why my logo is jumping from position to the next position etc. instead of smoothly sliding along like yours is?
Use a pre comp. Put the logo inside the pre comp and adjust the size. Google: how to pre comp after effects And Google: how to adjust composition size If you get stuck
Why such a difficult method? You can just animate X position and Y position parameters separately. You need two keys for each parameter, one key where the layer will be in the leftmost/upper position and the second key where the layer will be in the rightmost/lower position. And just apply a ping-pong loop to these parameters. That's it.
@@flowperekur if the logo bouncing is wider it takes less time between bounces. If the screen is bigger it will take more time between bounces. Most of the complication stems from the need to calculate for these factors. Having a single expression is also simpler for your average joe to just copy and paste, but you are correct that the x and y axis are independent from each other.
Just a heads up that the code shared in the link for the color change on bounce expression is missing a few semi-colons, causing an error in AE. If you're struggling with an error, make sure to add a ";" at the end of the lines of "var hueShift" and "var bounces" and it should solve your problem.
is there an easy way to check to see if the image being used hits the logo in the corner sweet spot, or do I have to set for a random amount of time, then watch to see if it hits the corner perfectly at any point?
I tried to create a script for that, but it's kind of bad. You can try to understand my code, but i can't help you more than that. Good luck! codepen.io/jesper-hustad/pen/LYQpWEL?editors=0010
@@jesperhustad if you set the time off set to 50 it hits the corner about 1:45 into the file, I'm sure if I played with it more I could fine a time that it happens a little later but this is fine.
Hi! Love this! The colours switch and bounce works! However I want this logo to bounce around for 15 minutes, though for some reason my logo bounces really quick to one corner and then back to the original location every 01.15 minutes... like a small glitch... and i cant figure out why this happens... help please!!!
Try looking at your composition size. Change it by 1 or 2 pixels and see if that fixes it. You can also try changing the logo size a tiny bit. Also make sure the composition is not looping in any way. That it’s longer than 01.15. How to change composition size: m.ua-cam.com/video/P3Plih1QzuY/v-deo.html
Hey man thanks for making this video, i was wondering how much time i will gonna waste doing this as a little thing in my after effects class!!! The only thing that i did´nt make was the changing color when the logo bounce, i try as you did it in the video, but i could´nt make it. Anyway thanks a lot
Good question. I thought I had a pretty simple solution. Use a simple spirtesheet and just offset the position on every bounce. Problem is that it wasn't easy to do at all in After Effects. I figured out how to do it, but it ain't pretty and it requires some editing of the other code. I can link a page with the code, but don't want to go trough all the trouble making it pretty and documenting properly how to use it.
Ok, I got to invested and fully implemented it. Look at the website linked in the description or click here: jesperhustad.com/ae/bouncing-dvd-logo-expression-in-after-effects I included a reference to you which you may enjoy : )
Credit Jesper Hustad if you want to use the AfterEffects expression code somewhere else. Adding the link to the website can also help users, but not required.
1. Find the image of your face. 2. Edit out the background with a tool like photophea / photoshop or other photo editing tools. 3. Save the image as a png to retain the transparancy around your face. 4. Drag and drop the png file of your face into After Effects. 5. Follow the rest of the steps laid out in the tutorial. Feel free to read the instructions from the link in the description. Good luck!
hope you can help me, i`m trying to use the code but it bounces off the screen and it seems like it thinks that the screen is not where i see it. how can i solve this? in the code i see that its written that the width maches the comp width but it bounces where i can`t see it
No problem, upload a screenshot (imgur) of your after effect composition where its outside the comp with the relevant layer visible and the position keyframe. I will take a look at it :)
dude! thank you that was great! just one question if i may, the object isn't hitting the edges of the comp probably because may comp is biger than the one you used, what do i need to change to make it fit my larger comp? again great vid thanks a lot!
If your logo image has transparent sections it will not hit the wall. Try to crop the image as small as possible. The code automatically adjusts depending on the composition size. Make sure the bouncing logo is directly inside the larger composition. For example putting the logo in a pre composition may break it. Hope that helps. Send a screenshot from imgur if that didn’t work
Hello, thank you for your tuto, this is truly amazing! I have one problem, tho. If I change my composition width and height to 1:1 ratio (like 1920x1920), the bouncing only happens in the upper left corner and until bottom right corner. What did I wrong, chief?
I checked it myself and I see now what you mean. The bouncing logo always goes diagonally, so if you put it in a square it will always bounce perfectly in the corners and never go anywhere. This is just the feature working as designed. Ways you can fix this is by: A: make the bouncing object not perfectly square B: make the screen not perfectly square
If you think mathematically about the problem. The box moves perfectly diagonally. So a square (with all equal length sides) will always hit on the corner. If one side is double the length the other it will bounce on the middle and perfectly hit the corner as well. This gets a bit more complicated with different shaped logos, but easy to test. On the linked article I added a small script to calculate when the logo will perfectly hit the corner for any shape. It’s a bit buggy and hard to use, but you can try that.
This is so cool and I have been looking for this expression like crazy, BUT is there also a way that the object scales horizontally (faces the other way) after each bounce?
Haven’t tested, but I believe this should work. Assuming you find the property to flip the object (where 100 is normal and -100 is flipped) Copy the expression code. Delete two last lines up to var fc Add this to last line fc %2==1 ? 100 : -100 Good luck
@@jesperhustad Thank you so much for replying. Unfortunatelly I'm too much of a village idiot to follow your instructions, can't find the "var fc", or you do you mean individual "var f" and "var c"?
Am I the only one to notice that the path is always exactly the same? So you basically just have a loop that bounces of the same 4 spots. Or am i missing something?
Hey man, great tutorial! I'm just having some troubles in knowing where to add the code you linked in codepen. Where exactly should I add it? Again, great tutorial!
In after effects. add the logo you want bouncing. Open it's properties in the timeline by clicking the small down arrow. After you have found the Position property the rest of the instructions should make sense. Read more about After Effect layer properties here: helpx.adobe.com/after-effects/using/layer-properties.html
Do you not have After Effects? Adobe has a 7-day free trial: www.adobe.com/products/aftereffects/free-trial-download.html You can also get the the program other places on the internet.
Wow this looks amazing! But how could I extend the time to make an endless loop? When does the logo reaches his Startpoint again, so no one can see if this is endless loop?
ok, here is a CodePen that automatically finds the next loop position given data points: codepen.io/jesper-hustad/pen/LYQpWEL?editors=0010 I also added it to the article version to help future people looking for this. Unfortunately AE crashes if you try to perform the calculations in an expression... Hope that helps!
There are many alternatives to acquire After Effects. A legitimate way is the monthly subscription. Cancel within the first 14. Days and it’s free I believe. There is also a 7 day free trial. www.adobe.com/products/aftereffects.html
"I'm not a UA-camr." Well this was far more informative and straight to the point than some other UA-camrs can get to. Thank you so much for the tutorial!
I hear you brother, but somethings are just there to be admired and dont last very long.
This is the most helpful and informative video I've seen on UA-cam since the birth of UA-cam.
Please don't ever delete this video! This saved me hours, maybe days of fiddling with this. Thank you!!!
for those who cant access, here is the code
// customize speed, position and offset here
var v = 100; //velocity
var i = [0,0]; //initial position
var o = 950; //time offset
var f = (time+o) * v //function
var t = [i[0]+f, i[1]+f]; //time x/y
var d = thisLayer.sourceRectAtTime(); //dimensions
var s = transform.scale; //scale
var lw = d.width *(s[1]/100); //layer width
var lh = d.height*(s[0]/100); //layer height
var w = thisComp.width - lw; //screen width
var h = thisComp.height - lh; //screen height
// cycle count in x and y
var c = [Math.floor(t[0]/w), Math.floor(t[1]/h)];
// position in cycle for x and y
var p = [t[0] % w, t[1] % h]
// cycle isOdd ? inversed : original
var x = c[0] %2==1 ? w - p[0] : p[0];
var y = c[1] %2==1 ? h - p[1] : p[1];
[x + lw/2, y + lh/2]
THANKSSS
If you want a shared velocity value, one way to do it is to add a Slider Control to one of the layers and then reference its value in the expression
Came here, 11 months after you commented, to say the same thing!
Came here, 13 months after you commented, to say the same thing!
One of the best and most straight forward tutorials I have ever watched. Thank you so much
Thought this was going to take me hours and your tutorial was so quick and to the point. Thank you!
So much better than other tutorials like this
You're the man Jesper !
Dude you rock. This was so easy to implement with your instructions.
you're a fkn legend for this, bro.
jeez thank you, this is exactly the simple method i was lookin for. godspeed brother
LOL Man, this was a great video and I thought your energy was hilarious
You saved me like 2 hours of work. thank you
Glad to hear it! Appriciate the kind comment
Man I hate after effects, you just saved me so much valuable life time - as we say in Berlin "I kiss your eyes" 🙏🔥
the fact that you're still actively responding to comments to help people, on a 2 year old video is so amazing ❤ my question is, do you know how to make it end in a specific location? i'm assuming it's similar to how you'd have it start in a specific place, but i'm not too sure how to go about making it end where i want it to
Its been a while since i tested this code. But try setting: var o = -100
This is the offset variable and I think it may be able to use negative values. That way after 100 frames the logo should be at the start position (which will now become our end position)
so if you know how long your composition is. Take the number of seconds and multiple by frame rate and put that number with a minus for the var o = (third line in expression)
for example 20 second composition and frame rate of 24 would be var o = -480
this is super awesome. thank you for making this!
legend.
Earned yourself a subscriber, you are amazing :)
That´s exactly what I needed. Thanx man!!!!
Hey know this is a long shot to get a response, but I am trying to have this scale with each bounce. I've tried using a slider that grows with each bounce, placing an expression right in the scale, expression in the shape layer size but it all doesn't seem to work correct. By that I mean it is delayed on when it scales and it seems it's not looking at the layers new size correct, and rather the initial size. If I could get any help that would be awesome.
Can you please help, my after effetcs says Function thisLayer.sourceRectAtTime is undefiend expression disabled Error occured at Line 9
Probably accidentally just deleted some random charachter.
Copy again from the site and see if it works.
Double check that everything looks right and you followed the instructions.
@@jesperhustad Thanks for the response my man. Yes everyting looks right i really dont know waht it could be, does the composition size have to be specific or something else? Im trying to figure out what is wrong at line 9 but no luck.
@@x.2-303 try making a new empty composition and use a new image from Google and see if it works
BRO U ARE INSANE
Te amoooooo, me ahorraste montón de tiempo con esto, sos el mejor
This is awesome, thanks for sharing!
hey dude You really explained this very well and super simply!
The link in the description no longer works btw here's the code for anyone that needs it
// customize speed and offset here var
var v = 150; //velocity
var t = 0; //time offset
var p = (time+t)*v; //position
var d = thisLayer.sourceRectAtTime() //dimensions
var s = transform.scale //scale
var lw = d.width*(s[1]/100) //layer width
var lh = d.height*(s[0]/100) //layer height
var w = thisComp.width - lw; //screen width
var h = thisComp.height - lh; //screen height
// isReflected ? inversed : normal
var x = Math.floor(p/w)%2 == 1 ? w - (p%w) : p%w;
var y = Math.floor(p/h)%2 == 1 ? h - (p%h) : p%h;
[x + lw/2, y + lh/2]
Thanks man !!! It woked perfectly !!!!
Dude this is legit!
thank you for doing god's work here king
Exactly what I was looking for, thank you!
Hey - found a bug in the Hue shift code on the link where the hue wasn't using the true width This meant after some time (say 20 minutes) the colour was often changing before the bounce. Pasted in the line of code too define the true width and frame count and this resolved the issue.
Nice work dude, thank you!
yo bro this is really cool thanks for help, else I had to follow after effects 20min tutorial and ends up wasting an entire day doin the most crazy shit
Thank you! You are a life saver - was about to do this by hand...
Hi!
Thanks for this, super useful.
I have applied this effect to 7 logos on my screen. Is there any way to make them all set off in different directions. At the moment they all move off in sync toward the bottom right of the screen.
Thanks!
Not at my computer. But if You know a bit of coding here are the instructions.
use seedRandom(index) to make the random number generator give a constant result for each layer
So for example
SeedRandom(index);
var posX = random(width);
var posY = random(height)
var offset = random(10000)
Most important is to just set the offset variable as a random number in big range.
Ask chatGPT if you have any issues with the code.
yoooo you a real one for this thank you so much bro
Thanks dude, helped me a lot :)
Great tutorial thank you so much!
Hey man!
Awesome stuff.
I'm a little late to the party, but I have only one question: How to make it LOOP?
;-)
bro your a legend, soooooo helpfulll!!! make more stuf
How would I make it so it chooses a random direction each time it starts? I have a bunch of elements in the center of my composition, and I want to apply this script to each of them so that they all "explode" outwards in random directions
Very late response, but writing for anyone else looking in the future.
This is the first after effects expression I have made so don’t quite know the best practice methods, but I will try anyways.
When you copy paste layers it adds a number to the end. Write an expression that gets the current layers name, cuts everything except the last section with number, use the Random property and feed the layer number as the seed. You can then use these random numbers to set the random speed for each layer. Copy paste layer many times.
Don’t have time to test and write it out, but that’s how I would solve it. Sorry for not answering earlier.
Not all heros weare capes
not sure if you still have eyes on this video - but would you happen to know why my logo is jumping from position to the next position etc. instead of smoothly sliding along like yours is?
this could just be because of the lack of rendering while working, it could be that once you render it out it runs smoothly?
what if im using a 1920 (height) x 1080 (width) composition?
@@rogerdert should work automatically
next level ! I loveeeee
you are amazing, thank you so much
man you are amazing
Thanks a lot bro. It was REALLY HELLPFUL🙌
the bounce part worked good, i am not able to change iamge per bounce. sprite sheet also going bonkers. help!
My man thank you so much
Hi! Is there a way to bind the logo bouncing to a specific area instead of the whole screen?
Use a pre comp. Put the logo inside the pre comp and adjust the size.
Google: how to pre comp after effects
And Google: how to adjust composition size
If you get stuck
@@jesperhustad Thank you!
This is great! Thank you so much!
Thank you!
how change the code to Aspect ratio 9:16 for a vertical video?
No change needed.
Why such a difficult method? You can just animate X position and Y position parameters separately. You need two keys for each parameter, one key where the layer will be in the leftmost/upper position and the second key where the layer will be in the rightmost/lower position. And just apply a ping-pong loop to these parameters. That's it.
@@flowperekur if the logo bouncing is wider it takes less time between bounces. If the screen is bigger it will take more time between bounces. Most of the complication stems from the need to calculate for these factors. Having a single expression is also simpler for your average joe to just copy and paste, but you are correct that the x and y axis are independent from each other.
my animation is locked at 30 seconds, how do i make it longer?
incredible video!!!!
Thank you so much!
THANK YOU THANK YOU !!!!
Just a heads up that the code shared in the link for the color change on bounce expression is missing a few semi-colons, causing an error in AE.
If you're struggling with an error, make sure to add a ";" at the end of the lines of "var hueShift" and "var bounces" and it should solve your problem.
Eyy, thanks for the tip!
It has now been fixed:
github.com/Jesper-Hustad/personal-webpage/commit/0ec694b2ab6c9ec01da4e084a836d92050db6c75
is there an easy way to check to see if the image being used hits the logo in the corner sweet spot, or do I have to set for a random amount of time, then watch to see if it hits the corner perfectly at any point?
I tried to create a script for that, but it's kind of bad. You can try to understand my code, but i can't help you more than that. Good luck! codepen.io/jesper-hustad/pen/LYQpWEL?editors=0010
btw, i see that script is for when it loops, not when it bounces. You will have to change it for that. Sorry i can't help you any more than that.
@@jesperhustad if you set the time off set to 50 it hits the corner about 1:45 into the file, I'm sure if I played with it more I could fine a time that it happens a little later but this is fine.
You are amazing, bro I'm really greatful
gurl, u ate
Hi! Love this! The colours switch and bounce works! However I want this logo to bounce around for 15 minutes, though for some reason my logo bounces really quick to one corner and then back to the original location every 01.15 minutes... like a small glitch... and i cant figure out why this happens... help please!!!
Try looking at your composition size. Change it by 1 or 2 pixels and see if that fixes it. You can also try changing the logo size a tiny bit.
Also make sure the composition is not looping in any way. That it’s longer than 01.15.
How to change composition size: m.ua-cam.com/video/P3Plih1QzuY/v-deo.html
How to change colours to our particular colours?
Hey man thanks for making this video, i was wondering how much time i will gonna waste doing this as a little thing in my after effects class!!! The only thing that i did´nt make was the changing color when the logo bounce, i try as you did it in the video, but i could´nt make it. Anyway thanks a lot
Thank you some much for the code! Do you think it's it possible to change the logo every time there's a bounce?
Good question. I thought I had a pretty simple solution. Use a simple spirtesheet and just offset the position on every bounce. Problem is that it wasn't easy to do at all in After Effects.
I figured out how to do it, but it ain't pretty and it requires some editing of the other code.
I can link a page with the code, but don't want to go trough all the trouble making it pretty and documenting properly how to use it.
Ok, I got to invested and fully implemented it. Look at the website linked in the description or click here: jesperhustad.com/ae/bouncing-dvd-logo-expression-in-after-effects
I included a reference to you which you may enjoy : )
@@jesperhustad thank you so much!!!!!
How can I do it with a recording like for example your camera video that you record your face put that little window jumping? Plz help 😂
It's a chrome extension/app called CamDesk:
chrome.google.com/webstore/detail/camdesk/jmjgcfadcmkpmkfhecfcoghmaloblkod
Brilliant thank you!
How can I use this video somewhere else?
Credit Jesper Hustad if you want to use the AfterEffects expression code somewhere else. Adding the link to the website can also help users, but not required.
@@jesperhustad no no, I meant how can I use the video I created, somewhere else like UA-cam or something
@@flyingfire476 www.cgdirector.com/export-mp4-after-effects/
@@jesperhustad thanks a bunch man
how can i add my own image (i wanted to have my head bouncing around the screen)?
1. Find the image of your face.
2. Edit out the background with a tool like photophea / photoshop or other photo editing tools.
3. Save the image as a png to retain the transparancy around your face.
4. Drag and drop the png file of your face into After Effects.
5. Follow the rest of the steps laid out in the tutorial. Feel free to read the instructions from the link in the description.
Good luck!
hope you can help me, i`m trying to use the code but it bounces off the screen and it seems like it thinks that the screen is not where i see it. how can i solve this? in the code i see that its written that the width maches the comp width but it bounces where i can`t see it
No problem, upload a screenshot (imgur) of your after effect composition where its outside the comp with the relevant layer visible and the position keyframe. I will take a look at it :)
@@jesperhustad hello, I have the same issue, could you help me? I am animating a text frame rather than an image in case that is relevant. Thank you!
@@evij126 try pre-compose the text frame. And then apply expression to that
super helpful thank you!!
inCREDible! TY!
love you man
When I do this. my files doesn’t play on QuickTime. How could I fix that?
Sounds like a export settings problem
dude! thank you that was great! just one question if i may, the object isn't hitting the edges of the comp probably because may comp is biger than the one you used, what do i need to change to make it fit my larger comp? again great vid thanks a lot!
If your logo image has transparent sections it will not hit the wall. Try to crop the image as small as possible.
The code automatically adjusts depending on the composition size. Make sure the bouncing logo is directly inside the larger composition. For example putting the logo in a pre composition may break it.
Hope that helps. Send a screenshot from imgur if that didn’t work
Hello, thank you for your tuto, this is truly amazing! I have one problem, tho. If I change my composition width and height to 1:1 ratio (like 1920x1920), the bouncing only happens in the upper left corner and until bottom right corner. What did I wrong, chief?
Let me check on my machine if I can replicate the bug. Will come back to you
I checked it myself and I see now what you mean.
The bouncing logo always goes diagonally, so if you put it in a square it will always bounce perfectly in the corners and never go anywhere.
This is just the feature working as designed. Ways you can fix this is by:
A: make the bouncing object not perfectly square
B: make the screen not perfectly square
@@jesperhustad Thank you for reaching out!
This tutorial works great! Is there a way to make it longer than 30 seconds before it resets?
Increase composition length: ua-cam.com/video/uv1zcO-jRxQ/v-deo.htmlsi=oW-seQVXPsK91I71
@@jesperhustad epic, thanks!
OH GOD YOU ARE THE BEST
Just a normal guy, but thanks. I'm not a UA-camr, but it's nice to know people find the video helpful.
Is there a way to make it hit a corner every time?
If you think mathematically about the problem. The box moves perfectly diagonally. So a square (with all equal length sides) will always hit on the corner. If one side is double the length the other it will bounce on the middle and perfectly hit the corner as well. This gets a bit more complicated with different shaped logos, but easy to test.
On the linked article I added a small script to calculate when the logo will perfectly hit the corner for any shape. It’s a bit buggy and hard to use, but you can try that.
Great! Very useful!
All information and code available in the article version: jesperhustad.com/2022/03/17/ae-dvd-bounce-expression/
@Dio Prakasa FIXED! thanks for bug report ❤
thanks for sharing !
is this script can make loop?
This is so cool and I have been looking for this expression like crazy, BUT is there also a way that the object scales horizontally (faces the other way) after each bounce?
Haven’t tested, but I believe this should work. Assuming you find the property to flip the object (where 100 is normal and -100 is flipped)
Copy the expression code. Delete two last lines up to var fc
Add this to last line
fc %2==1 ? 100 : -100
Good luck
@@jesperhustad Thank you so much for replying. Unfortunatelly I'm too much of a village idiot to follow your instructions, can't find the "var fc", or you do you mean individual "var f" and "var c"?
@@UVtec all the way at the bottom there should be car fc (third last row). Sorry for late reply 😅
Am I the only one to notice that the path is always exactly the same? So you basically just have a loop that bounces of the same 4 spots. Or am i missing something?
If you have a perfectly square screen than it will follow a repeated pattern. Try changing the aspect ratio.
thanks bro!
God bless you.
Thanks!!
thanks for this
Hey man, great tutorial! I'm just having some troubles in knowing where to add the code you linked in codepen. Where exactly should I add it? Again, great tutorial!
In after effects. add the logo you want bouncing. Open it's properties in the timeline by clicking the small down arrow. After you have found the Position property the rest of the instructions should make sense. Read more about After Effect layer properties here: helpx.adobe.com/after-effects/using/layer-properties.html
which software is this?
After Effects
Could anyone help me make mine???? have a dj gig and wanted to make something like this with my own logo!!!
Do you not have After Effects? Adobe has a 7-day free trial: www.adobe.com/products/aftereffects/free-trial-download.html
You can also get the the program other places on the internet.
@@jesperhustad I put in the wrong code the entire time hahahaha. figured it out tho thanks again! straight to the point video
@@zot1113 Good to hear. I will try to make copying code into the expression part clearer. I think many where confused on that point.
is there a way to put my own logo in there ?
Yupp, just import your own logo in After Effects and follow the instructions in the Article linked
Wow this looks amazing!
But how could I extend the time to make an endless loop? When does the logo reaches his Startpoint again, so no one can see if this is endless loop?
ok, here is a CodePen that automatically finds the next loop position given data points: codepen.io/jesper-hustad/pen/LYQpWEL?editors=0010
I also added it to the article version to help future people looking for this. Unfortunately AE crashes if you try to perform the calculations in an expression...
Hope that helps!
IT WAS ABOUT TO HIT THE CORNER WHY DID YOU RESET ITTTTT
thanks!
genius
i dont have after effects
There are many alternatives to acquire After Effects.
A legitimate way is the monthly subscription. Cancel within the first 14. Days and it’s free I believe. There is also a 7 day free trial. www.adobe.com/products/aftereffects.html
@@jesperhustad ok