Using Anchor Links in Adobe XD - With Scrolling Animation | Tutorial
Вставка
- Опубліковано 26 лип 2024
- Everything you need to know about Adobe XD's newest feature Anchor Links. Using Anchor Links in Adobe XD.
In this video we will breakdown anchor links and how to use them with scroll animations and how to use them inside of components.
New Videos Every Tuesday & Thursday!
Have a Great Day! Join the Notification Squad: click the bell 🔔
Subscribe: ua-cam.com/users/CalerEdwa...
Learn UI/UX Design and Adobe XD 👩💻👨💻(60% OFF)
Learn: www.udemy.com/ui-ux-design-us...
Join the channel and become a Member ❤️
Get exclusive content from me and help support the channel.
Join: / @caleredwards
SOCIAL: @CalerEdwards 💙
Dribbble- dribbble.com/CalerEdwards
Instagram- / caleredwards
Twitter- / caleredwards
Behance- behance.net/CalerEdwards
Website- caleredwards.com
Hangout on the Discord server! 💜
Discord: / discord
▶ Programs I am Using: Adobe XD
▶ Music: Epidemic Sound 🎹
Using Anchor Links in Adobe XD - With Scrolling Animation | Tutorial
#AdobeXD #CalerEdwards #AdobeXDTutorial - Розваги
Don't forget to give the video a thumbs up if you enjoyed it!
Have any tutorials you want to see next? Let me know :D
Same experience, but in mobile design please..
This tutorial was pretty useful I mean I understood easily all the steps you showed but could you make a more detailed tutorial on how you did that airpods into the case animation? It would be a useful lesson!
I would love to see how this (and many others) are then developed in Webflow....
You are really talented and proffessional. I love your tutorials and I always learn something new. The work around is not the greatest and we really need on scroll animation - hopefuly they will add it soon. But for now - your solution is really good, great design!
That was the best scrolling action workaround tutorial I have seen until now, simple and very easy example.
Brilliant workaround! Thank you!
Genius!! Excellent tut! Thanx!!
Great tutorial. Thank you.
Love your work arounds to create awesome possibilities, previously unchartered by man... Spicy
Love you, tutorial mate. I have been learning so much
Awesome, thank you!
Really good content! Thanks for sharing
so cool! thanks for sharing.
Amazing! Thank u so much
Hi Caler, thanks for the anchor links tutorial. Can we please build the entire thing from scratch like that ear-pods animation, how to create components etc. thanks
I use mask for such interaction.
Thanks for this way!
So simple! Thank you!! How to make this possible in mobile design, where there is no hover feature?
nice, thank you Caler, I always wanted to learn how to do the scrolling animation
Happy to help! Hope Adobe adds a trigger for this in the future :D
@@CalerEdwards It would be really amazing if you make a motion design tutorial or better a course. I found this on dribbble, it looks absolutely amazing dribbble.com/shots/7120561-Bike-Configuration
However, I also understand that it's not made in XD, probably in premier or after effect, I'd really love to learn the motion graphics.
pretty helpful indeed!
Thank you caler
Amazing.i like it 😍😍
Tricky animation hint:
Use "fix position when scrolling" option to fix the position of Airpods even after scrolling.
Put the "lid of airpod container" layer behind Airpod layer. And the "airpod container" layer above the airpod layer.
The animation at 3:59 can be achieved simply by creating a component of airpod layer and changing the position of airpods in the hover state.
Hope this helps :)
thankies bro :>
thankies bro . But how can i put layer on and behind pods?
nvm i find out thanks a lot :D
Perfect!
Hi Caler, that was clever. thanks!
Question, I have a fixed nav bar on top. Did you find a way to use anchor points and a second state to show users which section they are reading?
please share, thanks
Thank @caler. I've learned a lot from your videos. I just started using XD a month or so ago and so far I've enjoyed using all in one tool (from sketch, UI, micro-interactions and delivering to tech with redlines and CSS etc.)
Great to hear! I really love XD and where the updates have taken it so far :D
YOU DONT MISS CALER
Very cool man, never thought of doing it this way! When you have the hover on the airpods, you would also have that on the second state right? So they would still move when you hover them, even if they are in the case :p still very cool!
Great tutorial. Thanks 👍
Glad it was helpful!
thank you :)
thank you
Very cool 😎👍
Yesss!
Great video as always Caler! I couldn't find the Scrolling feature until you literally had to drag the wire as opposed to just doing from the states... Hmmmm.
Great video :-)
Great feature
What a nice tutorial, thank you! But how do I make the headset fit into the box when we scroll down?
Awesome content as always 👍👍
Thanks again! :D
Love the video! Learned a lot :)
Glad it was helpful!
@@CalerEdwards Hey! Can you please tell me where to get the AirPods mockup from? I am unable to find it. Thanks :)
*The Stupendous*
Cool Idea for on-scroll animation. create a 100% viewport height on hover.
thx.
Hello Can you please tell me where to get the airpods mockup from? I am unable to get it on the internet.
love you sir from Pakistan
Hey Cale E, like this trick a lot. .... I cans se how much it can be stretch.... ..I am new to this XD universe and your super clear Tutorial make me download the XD app, but I am having problem getting to connect them. there is anything you can share for me to achieve it!! thank!
From where do you got those airpods design ?
Can you use the anchor links on another art board or is it just for a single art board?
Hey, clean tutorial gg ! Is that possible to make the same but the animation "start" with the scroll of the mouse ? Like on the apple website -> at each notch of the scroll, it make tiny % of the animation ? Tysm
how are you able to get full aspect ratio of prototype preview artboard ?
You dont miss bri
I want to know why I can't drag a wire to another rectangle on the same page ? (like 3:04)
cool
Is the Airpod case in the second section inside component??
What if it was done in the navigation menu. Say "Overview" is active in blue at first, after selecting "Tech Specs" it will move to the Tech Specs section. Where navigation is fixed?
Question, If I make a landing page prototype animated, like this, does the developer do it as HTML or flash? Could you explain a little about this to me? PLEASE HELP!!
When I switch between my default and hover state the text location, opacity, ect remains the same between sense equalling no animation. Anyone have any ideas why this might be?
Great video, thanks for sharing! I just have one question.. How do you transition your AirPods to the case? 🤯
I have the case layer above the AirPods, with the lid behind them. So they seem to slide into the case. Hope that helps :D
@@CalerEdwards can you also provide resource material
Just fix the airpods position when scrolling...and boom! You'll get it
great tutorial Caler but i have a question how were you able to make the airpods fit in the case?
The bottom of the case is a layer above the airpods. And the top of the case is a layer behind them. Hope that helps :D
More adobe xd animation plsssss
Hi, lets say you have a one page website with 6 sections. On the left side you have a fixed menu which highlights what section you land on. How would you create that without making 6 artboards?
same doubt here, please let me know too if you find how we do that.
This is a great tutorial, how did you make the AirPods enter the case?
Tony Emenike The airpods are fixed on scroll. The lid of the case is a seperate image behind the airpods and the front portion of the case is placed in front (z-axis)
@@RaziRefiRafeek thank you so much
I cant' anchor to layers, only to Artboards, any help?
i dont have action scroll in my XD?
Can you share Source Xd File?
Hi Caler don’t know if anyone has asked this question
But I’m really curios to know how you made the AirPod enter the case
Are they separate entity using hierarchy level
Like how did you do it that the airpod enters the case
Is the case broken into smaller bits and are you using hierarchy ??
Will really appreciate your response
Yea the top of the case is on a lower layer than the bottom. With the AirPods on a layer in between them.
how to link an object to another object from a different artboard? (not to the artboard itself)
A lit difficult for me ， can you share the xd file please？
To get the slide in effect of the airpods just give the airpods alone fix position when scrolling
Hey Caler.
I´ve created onepage website inside XD and that works fine, but i´v a problem with the Hamburger Menu for Mobile. Hard to explain this but i´d really wanna show you the Projekt, if you interested i can share my Project. i´d doing a school Project and i could get an A for that.
Tanx in advanced
Sam
I would like to know how you did that with the airpods going inside the case
Here's how I think he did it.
3 separate layers: Lid, Airpods, Case.
The Airpod layer is mashed between the other two so when they meet, it appears as if the Airpods are inside the case.
I can't make the scroll effec; every time I press scroll to changes to transition and also I can't make the hover state properly
Hey Caler Edwards, I'm very beginner in graphic designs. I can't cope up with the designers on dribbble. Whenever I try to make something like those, I fail miserably. I also want to make good and clean designs like you and users in dribbble. Would you give me some tips to go on?? I'm losing my focus. Thanks!
The only advice I could give you is, stop comparing yourself to others that have been doing the same work for years, don't pretend to get the same results in weeks when it took a really long time for these people to learn those skills. Always keep a positive mindset about your own work, finish it and don't just let it die. I'm talking from experience. Stop living to others expectations. Maybe you work isn't as polished today, or tomorrow, not even in a month from now, but if keep working and learning new skills, and compare your work only to yourself, you will easily see the big improvement over a one year period, I promise you that. Losing focus and interest is really easy, no one can help you overcome those difficulties but yourself. I recommend making friends and meeting new people with the same interests as you. Hope that helps and makes sense, good luck to you.
@@BryanMario Thanks Bryan for this positive comment. Are you a Experience designer in this area.? Would like to chat on ig. Pls share your username
How do you make the airpods go into the case when you scroll?
Airpods fixed position, with top of case behind airpods in layers and bottom of case on top of them, hope that helps :D
@@CalerEdwards Ah, awesome, Thanks!
Love the content.
@@CalerEdwards I bet everyone watched this to know how you did that.but you didn't mention :D not everyone is CE.
I am not understanding how you got the type to go from Transparent to Solid between the Hover and Default states? I have tried this and doesnt work -you can only apply one Opacity value to both states? It is universal for me? Or has your text been made to be outlined / copy>pasted from Illustrated? Thanks for clarifying.
When you put an opacity on the default states, it will affect that value to all of the states. Then go to the new state (hover in this case) give the opacity 100%, and it will only affect that hover state. The default states kind of overwrites, so make sure you do the default state first, then whichever you want to change from that. Hope that helps :)
@@MrblondeBEAST It won't work.
If u do the animations in XD, can the developer do the exact animation I guess using JS?
You can do this with css3 too using smooth scroll to html element and id to the section where you wan't to navigate.
@@shivamgera7353 Thanks for the reply, but do u mean all the effects in XD or in Adobe Effects can be done by CSS or JS? Isnt it tedious? Is this the normal practice in development?
@@tomsawyer2k yea it is normal practice for front-end devs
how airpods are fit in box while animate... ?
This is a late reply and you probably have figured it out by yourself right now.But I think he just put the airpods in a layer between the cap and the box,and used the same hover trigger to activate the animation.
How did you put the airpods in that case?
Airpods fixed position, with top of case behind airpods in layers and bottom of case on top of them, hope that helps :D
@@CalerEdwards Thanks 😊
Can you please make a html and css tutorial of this ?😭😭
Why don't you share the .xd file
How to make a round cursor in an animation? Like at the beginning of the video
When you run a prototype, the cursor become circle
@@porwinii MacOs? In Windows version it doesn't work
Can you create a coding tutorial for this design
no plans for that at the moment but I have similar content coming soon, stay tuned :D
Why I Can't drag the wire into any selection in the same artboard as 0:43? I can only drag in another artboard:(
My Adobe XD version is 25.1.12.7 (Starter), does it matters?
What is your Adobe XD version in the video?
First tutorial I can't follow. Is that all one artboard? How did you create a component? Or a section? 🤨🤨🤨
He's using a single artboard, the dashed line indicates where the viewport end. If you create an artboard with specific dimensions, you can just drag the bottom to expand it, the viewport will stay the same. To create a component you have to select all the objects and right-click and select "Make component" or simply press ctrl + K (cmd + K on Mac?)
I really don't understand how to put this AirPods in the Case... i fixed the position of the Airpods but don't get it how to hide the half of them behind the case ?! for real ... please help me
Case is split into two parts - top and bottom case. Now try to make a correct layer order of both parts
Maybe is just me but found it difficult to understand what is going on :(
Not your fault, he is not able to properly explain what he is doing.
@@capnanaya4642 i don't correctly understand too but don't be rude, he make this videos to held people for free, he have good intention
I am new to XD and it is pretty clear for me. Even with skipping the video with no-sound
how did u even create a diff section what the
ur coo,l
1:07 i can't connect to that blue line (?!)
sorry my bad english QQQQQ
Update adobe xd
@@izzy-jd7ft thank you~~
@@ksyobo your welcome :)
Apple would like to see your location
could you please redo the tutorial with a bit more of explaining? thank you!
so difficult grr
Dude your explanation is very very vage... i try to replicate exactly this effect and combine with some other and it doesnt work. What you did is great but your explanation is very bad... do it again from 0 please.
This was my first test on a tutorial of this type. More showing the feature than how to create the design from scratch like normal. As far as Anchor links go was this helpful? Any input would be great for future videos. Thanks for your feedback :D
this was a horrible explanation. you skipped over most of the work
Thank you caler
glad you like it :D