EDIT: We made it to 1k likes in 6 hours! wtf! Give me until next week and it'll be up. Maybe next Monday or Wednesday. Also, check out my new blooper feature! (24:22). Like it? Hate it? Let me know!
Looks like we did it! I'M RELEASING THE HTML/CSS/JS VIDEO THIS MONDAY! (10/14) . Also, remember to subscribe, because at 800,000 subscribers, I'm playing guitar for the channel.
I know this is pretty old at this point, but at 13:19 he talks about how elements get placed outside the frame when they're dragged out. If you hold spacebar just after starting to drag the element out of the frame, Figma will keep the element/layer in its place in within the frame hierarchy despite being positioned outside it.
I know this video is old now, but in case anyone else has the issue you had...The arrow doesn't seem centered because your element dimensions are 15px by 15px. Your line is 1px, and your arrow keys/mouse drag moves by 1px at a time. You cant be in the center (7.5px) of the arrow unless you manually enter the value. Make your arrow 16px or 14px :)
You can make it behave more like a drag animation by using "move in" or "move out". It'll be more like a modified scroll-bar and bounce back if you don't pull far enough.
Love it, thanks for the whirlwind tour! Only thing I'd suggest is converting to components before duplicating the Figma artboard @ 12:50 - makes it easy to swap out images, tweak icons, etc later, without recreating animation.
PowerPoint s a very different tool, but they have a morph transition I've been using for about a decade that's similar to this. Love it. Each slide is a state for the elements and they do an animation/morph between them.
Wait...what! I thought I was the only one who can't speak correctly infront of a MIC. English is not my native language and I struggle a lot. A lot. I make many mistakes and really anooy myself when i can't find words to speak suddenly. So its normal for every creator. Thanks Simon, its motivating.
Usually i don't comment on any videos. But I need to make an exception here because I laughed so much at the intro. Nice video by the way. Greetings from Germany ✌🏼
Next time can you put the links to the unsplash photos you are using? I tried searching and couldn't find that photo of the trees and the url is too ambiguous with the possibility that it could be a 1, lower case l or uppercase i.
DesignCourse that is a really nice guitar! Once I’ve got the parallax working I’ll watch some demo vids. Happy Friday and thanks for the great tutorial 👍
EDIT: We made it to 1k likes in 6 hours! wtf! Give me until next week and it'll be up. Maybe next Monday or Wednesday. Also, check out my new blooper feature! (24:22). Like it? Hate it? Let me know!
All Likes For You Man
Please :D
it's good to ask for likes on your video because sometimes we forget the like btn and you remind us by saying that.
wow, sound good. I'll cheat here. 5 likes from me (5 in 1) haha
@@ibrahimjab No cheating!
Looks like we did it! I'M RELEASING THE HTML/CSS/JS VIDEO THIS MONDAY! (10/14) . Also, remember to subscribe, because at 800,000 subscribers, I'm playing guitar for the channel.
Wow! I would love to see you playing guitar !
same effect with this tudabit.com/liburanke/ and yes love to see you playing guitar
We want a cover of Linkin Park, cos you look like Chester Bennington. Pleasee..
I know this is pretty old at this point, but at 13:19 he talks about how elements get placed outside the frame when they're dragged out. If you hold spacebar just after starting to drag the element out of the frame, Figma will keep the element/layer in its place in within the frame hierarchy despite being positioned outside it.
ua-cam.com/video/Pe_KMqDJp3M/v-deo.html
I know this video is old now, but in case anyone else has the issue you had...The arrow doesn't seem centered because your element dimensions are 15px by 15px. Your line is 1px, and your arrow keys/mouse drag moves by 1px at a time. You cant be in the center (7.5px) of the arrow unless you manually enter the value. Make your arrow 16px or 14px :)
Just the bloopers at the end are enough to hit that like button! Well, not to mention that the rest of the video is superb aswell :D
Thanks! now i wonder if this works as well in a Desktop prototype, scrolling to more sections in the page.
You can make it behave more like a drag animation by using "move in" or "move out". It'll be more like a modified scroll-bar and bounce back if you don't pull far enough.
doesnt work , the whole screen moves around
Bro 1000 likes achieved. Congrats! Now to the browser effect tutorial please?
This is an awesome video tutorial, Any plan to make a separate video about how to code it using HTML and CSS
Read the pinned comment, the description, etc.. Pay attention bud! 😂 (Hint: I need 1k likes in 72 hours and I'll do it)
@@DesignCourse Sound good, you gonna get more and more likes for sure for this cool video tutorial.
Yes!!! I've been waiting for a Parallax Animation tutorial for Figma for a long time!!! :) thanks
This is so cool. I really love your content. Most of my works are self taught by your UA-cam videos
Awesome tutorial! I laughed when you created the arrow though. You literally have an Arrow tool next to the Line tool in Figma. :P
he wants to design his little arrow buddy :)
-
-
O
Figma is by far the best tool and team out there. They are killing it!
I love XD too though.
Love it, thanks for the whirlwind tour! Only thing I'd suggest is converting to components before duplicating the Figma artboard @ 12:50 - makes it easy to swap out images, tweak icons, etc later, without recreating animation.
just clicked the thumb up button and I am excited to see the HTML,CSS and Javascript Tutorial
If you want to align the arrow with the line just select both of them and center align
But how to make the same but using scrolling in browser as a trigger?
I love the energy of your new introduction ! The music is great, the word need more BASS
Davie is such an inspiration.
@@DesignCourse to SLAPP the LIKE button under this video
@@renedekart5069 what's a relevant term I can use based on our industry (design/code)?
@@DesignCourse "Force state" Actually, if this video reaches 4000 likes, i will show you how to DESTROY like button.
Check-mate SLAPPERS!
PowerPoint s a very different tool, but they have a morph transition I've been using for about a decade that's similar to this. Love it. Each slide is a state for the elements and they do an animation/morph between them.
Looking dope bro🤩
Aside from the topic, I noticed your awesome guitars!
Super Strat is the only way to go. Nice video by the way :P
Mate, you got 1000 likes in 6 hours. Now you gotta do it.
please
This is so cool! Learning how to design my first website and planning to use a similar style animation. Thank you so much!
Wait...what! I thought I was the only one who can't speak correctly infront of a MIC. English is not my native language and I struggle a lot. A lot. I make many mistakes and really anooy myself when i can't find words to speak suddenly. So its normal for every creator. Thanks Simon, its motivating.
Hi. I have a starter question. How can i transfer that design to wp elementor?
Thank you. Wonderful combination of images, easy explanation.
ua-cam.com/video/Pe_KMqDJp3M/v-deo.html
I love these videos!! Thanks
really useful stuff, looking forward to more on figma animations n tips big up
lol you handle your bloopers exactly like I do. My wife opens the door and is like "Who are you yelling and swearing at?" hahaha
We homeschool, so my daughters have drunken sailor mouths because of me. :[
Awesome video. Thanks 🎉
You posted 3 years ago but I still liked!
I really enjoy your tutorials & the simplicity you use in your designs. Thanks a lot 👍
ua-cam.com/video/Pe_KMqDJp3M/v-deo.html
"Awesome stuff"
- Gary Simon
Usually i don't comment on any videos. But I need to make an exception here because I laughed so much at the intro. Nice video by the way. Greetings from Germany ✌🏼
every new client wants the parallax effect as if they were crazy
You could have used the Unsplash Figma plugin instead of using PS. Or did the plugins come later?
Hello! Awesome video!!! Seems like drag down it's not working anymore :( I only can drag by left. Is that correct?
Hey thanks for the video really helpful but I have a major problem when I set up On drag nothing happens, could you help ?
lol @ 0:30 is when I dropped the like for this one 😂 ya had me crackin up & the bloopers lol
Nice job!
DesignCourse is awesome :)
Great!!! Can we save that like a video then?
Nice... Is there a way we can make images act like carousel
Wow amazing content!!!
Can i integrate the figma Parallax effect template in sales funnel Tool? Would be this be work?
just the feel, you looks like back on 2018, keep up the good work and the gym!
amazing tutorial
it only animates the opacity not the position how do i fix this? thanks
I can see more guitars! Cool! But yes, thank you for these great videos and tutorials...
One like more...greetings from Mexico, keep the good work.
Love this course. You’re wise handsome teacher
😂
love this new style 👍👍
You can add arrow points to lines in the stroke settings
Duuhh, thanks!
Always appreciate these videos, thank you!
Nice and simple tutorial. love it!
ua-cam.com/video/Pe_KMqDJp3M/v-deo.html
Could you do this same effect with the new scroll function that would be a cool video
Thank you for the level-up :)!
Next time can you put the links to the unsplash photos you are using? I tried searching and couldn't find that photo of the trees and the url is too ambiguous with the possibility that it could be a 1, lower case l or uppercase i.
One second!
Done, check the video description. Thanks for the reminder.
Gotta be said, that looks like a great axe colllection. More details please... especially the Strat 3rd from the left :-)
That's a Charvel DK24 HSH. I'm looking to upgrade very soon. I'm not sure what yet though, I might make a 4 hour road trip to the sweetwater.com HQ
DesignCourse that is a really nice guitar! Once I’ve got the parallax working I’ll watch some demo vids. Happy Friday and thanks for the great tutorial 👍
Where is the video for web?
Great content! Thank you
If you have more time you can make it with Reactjs as well. But for not we need html,css and javasscript. Thanks
ua-cam.com/video/Pe_KMqDJp3M/v-deo.html
const intro = new Intro('👍')
Any tutorial on figma?
nice lesson, thnx, best
Adobe XD zoom works with both alt and ctrl
Thank you ❤️
nice bro i like your work
cool tutorial
Eeeeboyyyy, that is so cool, you are awesome!!!
what is video's the song ?
What was that sound at 15:05 :D
Amazing, thanks!
can i do the same thing using adobe xd. am just a die hard fan
It would be better if you drag the forest region and blur instead of brown colour in the second half of the screen .
How you find those amazing background?
how to export this animation from figma can anyone tell?
You are the best, for real.
Wow! Superb, master! Thank you, congrats from Brazil! :^)
Is there another way to do it without Photoshop or paid tools? It would be so great! Thanks for the cool vid. (=
Thanks
LIKE ITTT !! GOD DAMN IT
24:41 wow great
Please don't stop means the world to me
Love that shirt ;)
Thank you! Super!
is it possible to make it a reality with CSS and HTML ?
Brilliant, THX!
Really usefull
Super cool
this is awsome!!!
Thank you, nice tutorial!
This is mind plowing💥
Just gave a like
Cool!
Thank you!!!!
👏 Yeah bro, let's do it 👍
Can You Add Translate For Video
Eres un crack... y bueno por compartir.
Can you send this edited photo, plzzz