Apple Website Font Zoom-In Scroll Animation | Tutorial
HTML-код
- Опубликовано: 5 авг 2024
- Step-by-Step Guide: Create Perfect Zoom-in Typo Animation - In this video, I'll show you how to create a stunning zoom-in typo animation like the one on apple.com. It looks simple, but actually I had to spend two hours figuring out how to make this animation perfect. The effect works really well on smartphones too.
Watch the result:
zoom-in-typo-animation.webflo...
Open and clone in Webflow Designer:
---------------------------------------------
My online courses:
👉 Webflow online course: learn to professionally implement websites for customers step by step (without programming knowledge!):
bit.ly/webflow-online-kurs
👉 Create web design quotes with three pricing options:
www.jonasarleth.com/produkt/w...
---------------------------------------------
Test Webflow for free via this link:
bit.ly/webflow-testen *
Learn Webflow quickly and easily:
webflow-lernen.de/tutorials
---------------------------------------------
// TIMESTAMPS
00:00 - What we are going to build
01:08 - Setup / structure in Webflow
03:43 - Problem approach 1
06:43 - Problem approach 2
09:45 - Solution with SVG lettering
16:48 - Result
#webflow #apple #webdesign
---------------------------------------------
// PATREON
► Support my channel on Patreon (several podcast special episodes and webflow tutorials per month): bit.ly/patreon-seite
----------------------------------------------
// MY WEBDESIGN AND FREELANCER BLOG
► jonasarleth.com/blog
----------------------------------------------
// SOCIAL MEDIA
► LinkedIn: / jonasarleth
► Instagram: / jonasarleth
► Dribbble: dribbble.com/jonasarleth
----------------------------------------------
// MY WEB & DESIGN PODCAST
► iTunes: jonasarleth.com/itunes
► Spotify: jonasarleth.com/spotify
► SoundCloud: jonasarleth.com/soundcloud
► Overcast: jonasarleth.com/overcast
----------------------------------------------
* Affiliate Links
Free Webflow Cloneable 👉 webflow.grsm.io/zoom-in-typo-animation *
Preview 👉 zoom-in-typo-animation.webflow.io
My Tools List 👉 www.jonasarleth.com/tools
Support my Work on Patreon 👉 www.patreon.com/jonasarleth
Mein Webflow Onlinekurs 👉 webflow-lernen.de/kurs
Thanks for watching my content!
* Affiliate Links
Vielen Dank Jonas, gerne mehr von Apple. Könntest du auch die Codes z.B als Notion Link zur Verfügung stellen? Manche können den Code auf Webflow nicht exportieren, da es keine deutsche Zahlungsmethoden auf Webflow gibt.
I've been looking for HOURS for a tutorial on this animation - and literally almost started crying when it wasn't in English..
god damn you, god damn you all to hell!!
I will start english tutorials next month on my second channel Formburg
Find diese Apple Breakdowns sehr interessant. Gern mehr davon 💯
Mach ich gerne
Hallo Jonas, super Video, wie immer! Danke!
Man kann den ersten beiden Elementen im Interactions-panel noch ein Ease-In-Quad oder -Cubic mitgegeben. Damit explodiert das SVG am Anfang der Animation nicht so streng und es kommt der Apple Animation noch einen kleinen Tick näher.
Wichtig ist nur, dass man beiden Start-Elementen das Easing mitgibt, nicht nur einem. 👍
Richtig guter Tipp! Habe mich immer gefragt wann man bei Scroll Animationen ein anderes Easing verwendet aber da macht es tatsächlich Sinn. Wirkt besser. Habe ich direkt im Cloneable angepasst 👍
Vielen Dank. Super interessant ✌️
Freut mich 👍
Perfekt 👌
🙌
hatte genau die selben probleme und dachte mir, bevor ich da jz 2h rumdoktor, das wird doch schon jmd gelöst haben. super video. werde aber ein inverted svg nutzen, damit das ganze acuh content dahinter revealed, sozusagen als maske
Ich ne gut Idee!
Auch
muchas gracias :) muy util
🙌
For a very small instant.. I thought I was understanding what you were saying, until I realized that not at all 🤣
Do it again and again and again 😉
Hello Jonas, great tutorial! I need some help with the SVG. I'm trying to change the direction of the zoom one of the letters but it's not zooming in that area. Any tips? Dankeschön!
thank you great breakdown would the same be possible with an image or video ? thank you for your time
Sure! In fact the MacBook Air title is an image in this tutorial. It's the best performance with an image. Video would be possible but could get unsharp at some point.
@@jonasarleth Thank you so much, i meant picture but i gues its the same
"Ich wusste nicht, dass man in eine H1 einen DIV machen kann".
...ey und ich denk' immer ich hab nicht genug Wissen, um YT Videos zum Coden zu machen 😂😂😂.
Sorry, ich bin kein Programmierer. Aber mach gerne einen neuen Channel auf damit ich von dir lernen kann 😉
@@jonasarleth bald! 😝😄