Apple Motion: Slices & Tiles Tutorial

A technique for quickly and easily slicing up an image into multiple slices and animating the result. A variant on a commonly used concept. Apologies if you have seen this already a hundred times (I haven't watched every Motion tutorial ever published to check how many users have already landed on this trick) ... a few of you may be new to the concept. IMPORTANT NOTE: Make sure your display is set to read Frames and not Timecode otherwise you might end up miscalculating the numbers for this effect to work correctly.

[@PhilsDroneZone]

you really are the master at this. I have had motion for 6 weeks and learned how to make a few simple titles and transitions and figured out how to do a revolving planet, which I felt really pleased with. How you figure this lot out, heaven only knows....it's absolutely gorgeous. I may never be able to do stuff like this but I do like watching the master at work.

[@TheaterMonkee]

Brilliant stuff! A word about the magic number 8640: the derivation seems to be (height of mask) * (frame rate). E.i., 8640 = 360 * 24. (I figured this out when 8640 didn't work for my 29.97 fps project.) Alternatively, in the Throw settings, set Increment to "Ramp to Final Value", which sets the throw distance to pixel values. Then all you have to do is set y = -360.

[@SimonUbsdell]

Yes, Throw is a funny one to get your head around. What it actually does is that a Throw value of 1 on any axis moves an object along that axis at a rate of 1 pixel per second. Well done for working out the sums for your project - so much of motion graphics is simply getting the maths right.

[@grasskingdoms]

so glad you're doing these again!

[@mcsemeister]

Thank you Simon for a great Motion tut. Can't wait for the next one.

[@JedBrownCORProductions]

Amazing work as always!!!!! Thanks again for sharing your creativity as this helps me overcome any “slumps”. I keyframe mostly and need to take advantage more of the behaviors.

[@toddlask]

so glad youre back simon!

[@danielpeens3253]

Thanks Simon! Your tutorials are awesome. Gonna try this today 😁

[@RoastChestnut]

Wow, Thank you, I am impressed. This is fantastic. As an Apple Motion noob, It will probably take me a while but I must try this.

[@rowie409]

Thank you for another great tutorial.

[@erwinvanhul4139]

Wow Simon! Another great tutorial. Thanks for all the beautiful things you made! Greetings from Belgium an a happy 2018!

[@jusachipa]

Thanks for the new Motion tutorial, Simon. Have a super 2018!

[@SimonUbsdell]

Thank you. Happy New Year to you.

[@jjk246]

Great stuff, you'r the best, thanks!

[@alexrets3454]

Thank you, Simon!

[@marcelocaneschi6576]

FANTASTIC!!! Thanks very much!! And have a great New Year!

[@SimonUbsdell]

And a Happy New Year to you too and everyone who is kind enough to watch this channel. I hope it's a great one for all of you.

[@marcelocaneschi6576]

Thank you! Your simplicity makes you THE BEST! And being here on your channel with you, certainly it will be a great year for us all!!

[@livemeliveme]

thanks Simon you are great

[@genetvideo4009]

Thanks for this tutorial. Happy Year 2018

[@HenriT]

This is great! Thanks!

[@markloken2465]

Awesome THANKS!!

[@rolandrickphotography]

Thanks Simon, for another great tutorial. What is that for a fancy calculator you are using?

[@nssdesigns]

very nice thank you...

[@remydeveze]

love it !

[@SimonUbsdell]

Merci, Rémy. Ça me plait vachement :)

[@onurdurma]

Ty ty ty 🙏🏻

[@LouAdzima]

Very Nice. Glad it was not difficult🤔🤔???

[@rolandrick]

Hi Simon, so many thanks for your contributions. To me extremely valuable. One questions may be of interest for all visitors of you channels and this video in specific: what are the formulas you used for the calculations and how do they derive? 1920/12, 1080/3 and 960 - 160/2 is obviously logically and needs no explanation. But 8640/1080 = 8, what's the idea behind it? Meaning, what is the math behind 8640? Thanks for reply!

[@rakeshdevan924]

Amazing Simon, great technique! I have a question Simon. Is it possible to create a coil spring from a line? I am trying to bend a line to a spring and I just can't figure out how. Please show me if you can. Thanks!

[@SimonUbsdell]

I'd need a bit more information about what you are trying to do - please feel free to email me at [e-mail]

[@mdshishirsarfaraz]

Super Super Super ✌✌✌

[@chbuschmann]

Are there times you reach for either Motion or Fusion? It would seem Fusion is more than capable to do whatever Motion can do?

[@JuanCarlos-tj3ox]

Thanks for this new tutorial, Simon. I have tried to do it for 4K and the throw behaviour didn’t work for me even keeping the proportional measures (magical number 8640 should be 17280 in 4k, I guess) I changed throw behaviour by keyframes on the y position and got fix it

[@SimonUbsdell]

Here's how Throw works in terms of the numbers. A Throw behavior lasting 1.0 seconds with a value of 1.0 for any axis will move an object by 1.0 pixels over 1.0 seconds along that axis. The duration of the Throw is a key factor in determining how far the result will move. Since in this case we are wanting to move the object over just two frames a distance of 720 pixels, 17280 is the right number. (If we assume a frame rate of 24fps.) This seems to work just fine for me, so I'm not sure what was happening with your project for it not to work. Perhaps the frame rate?

[@JuanCarlos-tj3ox]

You were fully right, it was the frame rate. I was using 30 FPS. Thank you!

[@SimonUbsdell]

Thanks for letting me know. At least now I understand a bit better how it works too!

[@user-eb8db4xq1p]

I tried to make an animation of 24 slices with parameters: height 80, width 360, ramp 920, throw 8640, but it does not work with the replicator - 24 columns in 3 rows line up in 12 slices with a large gap and the excess slice flashes in the middle. Black and white animation at the beginning of the video looks stylish, I hope the author will make a tutorial with this example. Thanks for the educational videos.

[@juanramongarza431]

Great Tutorial. Can you make this same effect with a video file instead of a picture?

[@SimonUbsdell]

I'm afraid it only works with still images, but of course you could always use a freeze of your video and then start it running after the animation has finished, for example.

[@juanramongarza431]

Thank you. I will try that.

[@KalalProductions]

Hey, Simon! I've been trying to use this same technique for fewer tiles (2x2; 4 tiles total), but it's not working. I've changed the size of my rectangle mask to be larger (and calculated the math, per your instructions). Then, I changed the Replicator Columns/Rows to 2. For some reason, now it just wants to stack all 4 tiles on top of each other in the upper left corner. Why won't the tile fill ACTUALLY tile fill? I don't have any offsets or anything. I'm following your tutorial step-by-step, my settings are set to "Start From 1" and "Frames"… It seems like the problem is in the replicator for some reason, but I don't know why I can't just specify the columns and rows.

[@SimonUbsdell]

Please send me your Motion project and I'll take a look: [e-mail]

[@cradlepropertymedia4832]

Great video! I follow the tutorial, for some unknown reason when I add the camera, I get an error message from Motion 5.4. The message title is "One or more masks have been disabled", the content of the message is "Shape masks can only be applied to 2D groups or flattened 3D Groups". As result of this, the Rectangle mask has been disabled. What setting do i need to change in Motion?

[@SimonUbsdell]

When you add the camera don't allow it to create 3D groups - this is the important part. Then put everything inside a new group and make that 3D.

[@cradlepropertymedia4832]

Thanks Simon. It works.

[@SimonUbsdell]

Glad to hear it. Hope the rest of the project works out for you.

[@bendavis1135]

Hello, another great video. I hit one snag. For some reason once i clone and add the replicator, the last 3 tiles wont appear. Ive followed all the offsets as you have them. any ideas? Ben

[@SimonUbsdell]

There are a few things that can trip you up here. The first is if you haven't set the project's start fame to one rather than zero which means that your Ramp will not be the correct length. The other things to watch are that you have set the replicator Origin and Build Style correctly. If none of that fixes it, please feel free to email me your project and I can take a look. (Address in the About tab above.)

[@bendavis1135]

I slipped up with some of that last week, today is attempt 2, which is working far better, apart from those last 3 tiles. Ive doubled checked everything, i may be missing something very obvious, but ill send it over. You are too kind. Ben

[@SimonUbsdell]

To anyone else running into this same problem, I should have mentioned that you need to set your counter display to show Frames and not Timecode. If you have Timecode selected, the first frame will still be counted as Zero and not One (regardless of what you have set in Preferences) and it will make a mess of the effect.

[@BenjaminGib]

Thanks for all your great work and sharing it, Simon.

[@Balticgerman]

Maybe it is because I have another Motion, but... well it does not work at all for me. When I duplicate the ramp the mask jumps out of the window and when i finally made it to have 3 ramps crawling across my screen, the throw completely killed me. Plus I have had some strange mistakes. WHat version of Motion are you working with may I ask? Is it possible that my version (I just bought it a few days ago) is different that that´s why I cannot copy your work?

[@SimonUbsdell]

This should work in all versions of Motion. Make sure your Clone is the right number of frames - that can be affected by the frame rate you have chosen for your project.

[@Balticgerman]

Thank you Simon, I will try again....

[@onurdurma]

When you make -8640, there's a gap on the bottom. It's like there's no space when you do -9300. 1920x1080 everything is the same. :/

[@SimonUbsdell]

I don't know where you got that idea from but it looks completely wrong to me. Would you like to explain why you think it's right? Are you working in a 1920x1080 project and do you have square pixels?

[@ThePhotodiver]

I followed the tutorial and for some reason my masks moves on a 45 degree angle. It will not go horizontal. I watched the tutorial several more times and can't figure out what I am doing wrong.I have all of the correct values set. Any ideas as to what I may be missing? Thanks

[@SimonUbsdell]

If you'd like to email me your project, I'd be happy to take a look. (Address in the About tab above.)

[@SimonUbsdell]

On second thoughts, it sounds as though you have applied the Ramp behavior to the X and Y position rather than the X position only. Try swapping that and it should move only on X.

[@ThePhotodiver]

After looking at that part of the video it looks like I set the Ramp behavior for both x & y. I redid it and now works properly. Thanks!

[@SimonUbsdell]

I'm glad we found the answer!

[@BenjaminGib]

You are so awesome for doing this detailed help!

[@user-jx4sm9vq7w]

Hello simon teacher, there are two questions to ask you. The position of throwing y is set to 8640. How can this be obtained? Also, I see you, the replicator bar is 12, I set 12 to be missing the lower right corner, and set it to 13, just why, why do you want to take the time to reply, thank you, you are really amazing Your fans!

[@SimonUbsdell]

a) There is a simpler way of entering the right value for the Throw and that's to set the Increment dropdown to "Ramp to Final Value" and then all you need to do is enter a value of -360 for Y. It's a bit complicated to explain why 8640 works in this case but it does make sense if you understand how Throw functions. b) If you are having a problem with one missing frame it could be because you haven't set up your Preferences to start at Frame 1 as I recommended. If you would like to email me your project ([e-mail]), I'd be happy to try and problem solve it for you.

[@user-jx4sm9vq7w]

Thank you for your reply, I try what you said to jump to the final value, I learned a lot with you, I am very grateful to you, I will send you the project later, I am honored that you are so willing to help me solve the problem, thank you very much!

[@phyphedelic3214]

Is it wrong to like before the intro finishes?

[@SimonUbsdell]

:)

[@tarquin8270]

Wow that was like open university

[@nisar778]

Is this working video