Use Keynote to Create a Scroll-Based Parallax Animation

Подписаться 107 тыс.

Просмотров 296 тыс.

50% 1

Today I want to show you a trick I use for mocking up websites or mobile app designs using Keynote and Magic Move.
RESOURCE FILES: www.dropbox.co...
Keynote is a great tool for simulating different states of a flow.
It has an animation preset called Magic Move which creates animations between elements repeated in different slides.
Today I’m going to show you how to mockup a parallax effect on a website using Magic Move and Keynote.
Just a disclaimer, this is not a prototype since you can not really interact with it. This works more as a presentation.
Let’s get started.
----
I'm Pablo Stanley, a Designer :)
Follow me on Twitter: / pablostanley
Check out Carbon Health: carbonhealth.com/

Опубликовано:

5 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 172

@novelafilmacademy 17 дней назад

This video is a fantastic resource for anyone looking to elevate their presentations with scroll-based parallax animations in Keynote

@premiumturkish 3 года назад

You explained to me like I am 5 and that’s what I needed. Thank you!

@junaidseedat7852 3 года назад

Watching this 4 years later and is exactly what I was looking for! Thank you very much - this was incredible. Subscribed for more of your content!

@incredibilistic 5 лет назад

All this time I've been ignoring Magic Move because I just assumed it was doing nothing. Thanks so much for this tutorial. So simple and yet so effective and beautiful. Cheers!

@sfincione2000 Месяц назад

Keynote is so much easier to use than Powerpoint and there are lots of cool features like this in it. Nice

@michaelmccrory2220 3 месяца назад

Your tutorial is still very useful today. Thank you for sharing.

@phutloose Год назад

Thanks for taking the time to share - very inspiring!

@francescazurlo3182 5 лет назад

Brilliant tutorial and I loved the text in the second slide. Probably something that not everyone would notice. XD

@aellahee Год назад

It was explained so clearly, thank you so much. This is brilliant

@oldchannelprojectpowerpoin4118 5 лет назад

For those on a PC: the "Morph" effect is the direct equivalent on PowerPoint 2016 or onward.

@AC-gw4qu 2 года назад

Just what I needed, just when I needed it. Thank you!

@edwardjamesjr1 2 года назад

Great Easter egg. Long live the resistance!

@bettyescookingchannel 4 года назад

Thanks for sharing how to use keynote to create a scroll-based parallax animation.

@antonwebber8828 3 года назад

This is SICK! Thank you for this stunning example. I'm definitely going to use this in my next keynote presentation!!

@thabetalhroob2139 3 года назад

I would like to thank you a lot for what you have done for us.

@WePiphany 7 лет назад

One more VERY cool think about designing in Keynote is that you can ope and demo the Keynote file right on an iPhone. You can make a realistic looking/feeling App in Keynote this way and do some in-person user testing, along with QuickTime or Screenflow to record the screen and the user's face via front-facing camera. I can't wait for Keynote to support gestures. That is the biggest flaw, along with orientation adaption missing.

@noahm 7 лет назад

Thanks for the video. I would've never thought about ever using Keynote for this.

@sirhenryhu 5 лет назад

REAL USEFUL TUTORIAL! Amazing and this way really turns Keynote into a more flexible and realistic tool while presenting/demonstrating ideas to others. Thank you for sharing.

@mopedastyle8843 4 года назад

Thanks for sharing, this is so useful for me! Ande the video export option in the very end of the video is dope, didn't notice it before in keynote.

@MestrixGaming 6 лет назад

I will use this effect for my presentation in 3 days ! Great tutorial ! thanks from france ;)

@VidActionTV 4 года назад

Great tips thanks. I really like how the parallax animation makes the elements move independently. It makes the video more lively and interesting. - Dane

@harrisonmalone 7 лет назад

This is really helpful... didn't realise keynote could actually be useful in my workflow :)

@mylovelycatbetty 6 лет назад

a very nice tutorial and easy to get an idea regarding the animation.

@ChrisWhitbread 6 лет назад

This is such a sick idea, I never thought of this. Thanks!

@ngonzale3 6 месяцев назад

Great video. I'd love to know what were those blue vertical bars and how to use such guides effectively. Thanks so much!

@carlospaiz90 5 лет назад

Excellent!!!! I was looking for this a long time ago! Thank You so Much

@LearnUX 7 лет назад

Great way to show possibilities in Keynote.

@dabellaconsulting1900 4 года назад

THIS IS DOPE TUTORIAL, Thank You SKETCH!

@principe.borodin 3 года назад

Fantastic. Awesome.

@infinitesoulluos 7 лет назад

Great explanation, I have just used it as a component for my video intro, thx for the help!

@filipegill 7 лет назад

Great tut. So clear and smooth... and useful! Thank you.

@philbrooks5505 6 лет назад

This is awesome - thank you so much for being clear and explaining everything really really well.

@Tyrolax 7 лет назад

Yeah I use this quite a bit too! Fast & easy

@vivianjacob7863 6 лет назад

Great tutorial and tips! As a true Brazilian, I'm loving the bossa in the background, can you please share the song/artist? :)

@susycrypto Год назад

Fantastic !!! Thank you so much !!!

@zavierorlos1948 6 лет назад

Im just Parallaxed by this great Tutorial. Super Great Job. Thanks mate!

@MrStufletcher 5 лет назад

Pollaxed?! :)

@sunsetocean6984 2 года назад

Wow, thank you so much!

@milanistaminetti 5 лет назад

well done! it looks beautiful

@Cynchronia 7 лет назад

This is way too awesome! Thanks for sharing.

@iankeeber1890 6 лет назад

This is really great! I'm going to use this for keynote presentations - not an actual website - do you know how to make the magic move effect work in reverse? That is, if I go from slide 2 to slide 1, make the objects move back into place. Right now it just goes back to the previous slides state with no animation.

@gettingair 4 года назад

mind blown

@gabrieltaques1562 4 года назад

Super cool video!

@wallace_in_the_sky 5 лет назад

Excellent tutorial, thank you so much!

@Chris001DooM 7 лет назад

Pablo que brutal!! yo habia escuchado de keynote pero nunca lo habia visto en accion yo uso es screenflow y tambn principle, esta buena esa app muy sencilla.

@andysturt6374 4 года назад

really appreciate your interpretation of keynote tools. great video - going to use for some logo presentation ;0)

@ashutoshpawar 6 лет назад

The audio quality is so crisp, which headset do you use?

@HiFlyhigh 4 года назад

Very helpful, thank you for the video.

@martijndehaan 7 лет назад

You just saved my life, awesome! Thanks

@fayeyang7430 4 года назад

Thank you so much. It is so useful to me!

@gemoritzt 6 лет назад

Exactly what I was searching for! Thanks for this great tutorial!

@robertomiranda9083 6 лет назад

Simple and pretty. Nice tutorial, thanks :)

@beanyume 4 года назад

Nice video. Thanks

@rafaelrojasmadrigal7160 5 лет назад

Great tutorial! Thanks!

@tiffmien6998 4 года назад

great trick!! Thanks.

@WangDianqun 6 лет назад

Very useful and detailed, thanks a lot.

@michaellwalker8748 6 лет назад

Love the text!

@ChritsianBucic 5 лет назад

So magic! Superbe and interesting trick that I haven't know it exist ;-) Thank you!

@MauricioLorenzetti 2 года назад

Very nice! The only problem is that you end up with two versions of the artifacts. If you need to change things later, you need to do it twice for every change.

@filipkachnic 6 лет назад

Very good tip. Thank you!

@AiloviuAr 6 лет назад

Amazing tutorial, thanks for sharing!

@mayamax3d 5 лет назад

Is Magic move part of keynote or is a third part plugin?

@wirasantana 3 года назад

THANKYOU SOOOO MUCH

@gabrieldupacto 6 лет назад

You deserve to be rich! Thanks dude.

@jennaqu402 7 лет назад

Excellent tips!

@RelannaCR9 5 лет назад

Thanks a lot! That was very useful👏

@willimax5757 4 года назад

Thanks a lot!

@IrinaZoria 4 года назад

Thank u so much!

@hugo.santos 3 года назад

Awesome! Tks.

@biancardilaura 4 года назад

thank you thank you thank you!!

@precisionsoundworks8371 6 лет назад

You are awesome! Thank you for posting!!!

@JamesMcKinven 5 лет назад

This is so cool

@dirkwangke9476 4 года назад

I am new at Keynote, I am willing to hear all the teach from master keynote

@Santinho0926 7 лет назад

Thanks for this amazing tutorial! :) :)

@PaulLefevres 7 лет назад

Keep up this great job dude !

@clair4236 4 года назад

Thank you, Pablo for this clear and helpful tutorial : ) and I like your background music. What's the title? Is it downloadable?

@MarsorryIckuatuna 5 лет назад

Darn impressive. I wonder how long it’s been available. PowerPoint had a Morph transition that’s pretty cool and similar. Both are equally useful.

@deconcoder 5 лет назад

Keynote has had magic move for ages...

@BernardBertrand 7 лет назад

fantastic trick ! thank you

@melodramacaminante 3 года назад

Very illustrative, literally. Thanks.

@jazzledstv5555 5 лет назад

Great tuto :D Amazing!

@korpulian 5 лет назад

13:58 thx for the explanation - it really freaked me out. (don't own a track pad)

@GhxstinSoon 4 года назад

I know how to use Keynote it’s perfect for my Designs!!

@GhxstinSoon 4 года назад

And I can perfectly use Magic Move

@tinawang7867 7 лет назад

This is awesome! Is there any Parallax website building (html/js) tutourious you can recomment?

@brocky 7 лет назад

This is great!

@madhavdaga 4 года назад

Thanks!

@MalikJanS 7 лет назад

Cool hair cut dude! :-P

@patrickonthescreen 6 лет назад

Curious, but am I missing something here? The 'Object Push' transition in Keynote does much the same thing. Or was that not available when this video was made?

@ryanthies8701 7 лет назад

Any advice on how to make the exported movie a GIF or on a loop? As always, great work Pablo! Love the channel!

@DBSSales 4 года назад

If you export to MyMovie there is a loop option under View.

@enzomauro90 7 лет назад

Nice Tutorial, would be nice to see keynote in action for an app project. Have you examples?

@acseventyone 2 года назад

Hello, I had a question: I feel like creating an image swap on mouse hover in keynote should be doable? The effect i am looking for is what Amazon does on their product images pages. When you hover over the small thumbnail image to the left on a listing, it replaces the larger main image. Can Keynote do an effect like this?

@FilipeLosoft 7 лет назад

Amazing!

@RandomPerson-jg5qm 6 лет назад

Why not duplicate slide if you want to copy everything?

@ellemariej 5 лет назад

What's the font used?

@alexandrebatista9816 6 лет назад

Hi, how to create the same effect with clickable function for website ? Do you already have some video about that ? thank you !!

@alexandrebatista9816 5 лет назад

Corinne Holmes thank you, I am glad to hear from you.

@ErnestoPossiSpanishVoiceOver 5 лет назад

Really cool man!!!!

@Salheen 4 года назад

Thanks for the excellent demo. What is the name of the music 🙏

@sauceydesigns 6 лет назад

Hey great tutorial!! I ran in to a weird issue and I don't understand how to fix it. When I copy and paste the elements from one slide to the previous, and then play the presentation I see the object move in before on the corner of the slide. I hope I am explaining this right.