- 9
- 94 726
Daniel Hult
Norway
เข้าร่วมเมื่อ 10 ก.ค. 2022
I am Daniel Hult - a web developer who creates tutorials and videos on topics related to frontend development and UI design.
Subscribe if you want to learn how to create animations from scratch, write clean code and become a frontend developer.
Subscribe if you want to learn how to create animations from scratch, write clean code and become a frontend developer.
JavaScript UI Animations | Use GSAP like a Pro
Starter repo:
github.com/danielhult/n3-starter/tree/main
Learn how to use GSAP and timelines to create longer and complex animations easily.
github.com/danielhult/n3-starter/tree/main
Learn how to use GSAP and timelines to create longer and complex animations easily.
มุมมอง: 10 372
วีดีโอ
Page Transitions in JavaScript (BarbaJS & GSAP)
มุมมอง 5K6 หลายเดือนก่อน
Starter repo: github.com/danielhult/cura-studio-starter In this video we cover how to create page transitions with minimal JavaScript, Barba JS and GSAP. These techniques can be used to create any complex page transitions. Sorry about the zoomed in video - I forgot to set my recording sizes before starting. Will remember till next time 😉 Music: massobeats - honey jam (th-cam.com/video/HGMQbVfYV...
Code a Creative Agency Website from Scratch (Animations & Javascript)
มุมมอง 3.7K11 หลายเดือนก่อน
Starter code with styling: github.com/danielhult/aneuday-starter In this video we are continuing the process of coding a modern creative agency landing page. We are going to be doing all the animations and JavaScript.
Code a Creative Agency Website from Scratch (HTML & SCSS)
มุมมอง 4.6K11 หลายเดือนก่อน
Finished starter code with styling: github.com/danielhult/aneuday-starter Learn how to set up a professional boilerplate, structure your files and code a landing page for a modern agency.
Loading Transition with Javascript (GSAP Flip Animation)
มุมมอง 9Kปีที่แล้ว
In this tutorial, we will learn to create cool animations using JavaScript and the GSAP Flip plugin. You can find the final code here: github.com/danielhult/details 0:00 Introduction 0:30 Figma Design 1:55 Markup 4:15 CSS 6:15 Animation Explanation 9:30 Coding Starts 15:00 Flip Setup 18:20 Set Initial States 22:22 Flip Explanation 25:38 Fade Up Images 27:10 onComplete Explanation 28:05 Scale Im...
Page Transitions in NextJS with GSAP
มุมมอง 10Kปีที่แล้ว
In this video, we're going to learn how to use NextJS and GSAP to make page transitions. This technique is simple but very effective, and you can use it anywhere in your own app/page. Full code here: github.com/danielhult/practice/ 0:00 Introduction 0:23 Figma design 2:00 Project walkthrough 3:32 Code start 7:35 First page (Image grid) 10:22 Animations for image grid 26:35 Tweaking image grid t...
Scroll Animations with JavaScript | Smooth Scrolling, GSAP ScrollTrigger & Parallax
มุมมอง 22Kปีที่แล้ว
In today's video we are animating a small landing page with scroll animations. We'll cover smooth scrolling with Lenis, parallax effects and pinning sections. Hope you like it! Here is the starter repo if you want to code along: github.com/danielhult/outdoor-tones-starter
Smooth Intro Animation with React & GSAP | PART 2
มุมมอง 4.6Kปีที่แล้ว
This is part 2 in the series were we're are creating complex GSAP animations in React & Next.js add a loader to your site. Starter: github.com/danielhult/ultra-starter Final: github.com/danielhult/ultra-agency 0:00 Intro 0:30 Hero animation explained 2:38 Initial setup 5:10 Animate title 8:20 Hero timeline setup 13:25 Title animation continued 18:00 Animate image 22:50 Animate menu 24:20 Finish...
Smooth Intro Animation with React & GSAP | PART 1
มุมมอง 25Kปีที่แล้ว
In this series we are looking at how to create complex GSAP animations in React and how to add a loader to your site. Starter: github.com/danielhult/ultra-starter Final: github.com/danielhult/ultra-agency Chapters: 0:00 Intro 0:27 Introduction to project 1:40 Loader component 3:15 Linear-gradient trick 3:55 Hero component 4:20 Animation! 4:50 Figma reference 5:32 Animating Loader 13:00 Code str...
Thanks for this precious content bro. Are you still making the full course ?
Great tutorial man! You explained things nicely. Looking forward to more of your content!
Great tutorial! Thank you
I really love your work, please keep uploading more <3<3
Thank you very much, please dont stop making new gsap tutorial like this, it's very helpful for me as beginner.
In the parallax.js, when I add the scrolltrigger the website becomes extremely laggy How can I sort this out?
great! Thanks!
this is all i needed to understand GSAP as someone who only uses webflow ❤❤
For these kinds of animation gsap is overkill and you're better off using @keyframes in production. However, it does serve the purpose of introducing a novice to gsap. ))
48:00 note
nice explain bro
is lennis only for the smooth scrolling? the animations is with de GSAP
Bro you just super sick! Easily subscribed👌 Do more vids like this please. Thank you keep it up
your videos are great brother , but i think it woulf be better if you start your videos from scratch
Thank you , Please keep making other videos
Thank you!
GSAP SplitText should do that but it's a paid plugin
Leaving a comment at the 3rd minute just to commend you for your teaching method, really helps to anchor what you're teaching in mind...should make everything eventually easier to grasp and replicate/improve/propagate. Thanks.
Great video once again. Would you mind sharing which vscode theme you use, it looks like Nord, but not really ;) Thanks!
The way you explain the little things, its amazing 🔥. Your content is GOLD. Thank you so much ❤. If, you have time, keep uploading to us, specially those html css js gsap videos.
Thank you! I’m glad you found the video helpful 🙏🏻
Neat! With great explanations. Thanks for sharing.
Thank you! I appreciate the feedback 🙌
Had to follow instantly! Will you make a course soon? Or do you do 1v1?
I’m working on my first course - hoping to release this year 👀
This is so informational and you explained this perfectly!
Thank you 🙌
This was a great video. Did you intend on leaving the app.js file empty in the GitHub Repo?
Thank you! And yes, I don’t give out the full code as I want people to code along (and also watch my videos) 🤝🏻
@@danielhultcodes I figured that was the case after I commented... Just was curious to know for sure if it was intentional. I've recently been diving into GSAP and I love it.
Awesome! Learning gsap was probably the most important part of me being able to code creative projects, so definitely understand the excitement.
Yay🎉 another gsap video
solid video, would love to see some content around responsive animations and gsap match media!
Thank you! That's a great idea, I'll definitely add it to my list.
Good stuff, slow steady sensible. Sweet.
Thank you! I appreciate the feedback 🙏🏻
Hello. Daniel. This tutorial is exactly what I was looking for and I find it very useful for the structured animations. One thing is, after the animation was complete, I noticed that the layout looked awkward because the hero image stayed the same size when I changed the browser size. I wasn't familiar with GSAP Flip, but I'm going to improve this part myself in this opportunity. Thank You!
Thank you - I'm glad you found it useful! Also good thing to try and solve that yourself, that's how you learn. Have a great day!
The content is initially marked with an arrow. That's not the best. Please tell us _createHero() { const tl = gsap.timeline(); this.heroImages.forEach(image ) }
Not sure what you mean. Could you provide more info?
Hey Bro, this is soo cool. Could you make a tutorial webfow + gsap . That would be great help
Thank you man! I’ll put it on my list if enough people want to see it 👀
@@danielhultcodes It would be amazing!
Great work mann. I normally make these intros with CSS animations, delays and cubic beziers. I'm so glad to see a gsap version.
It can be quite the work to do this with CSS! Glad you found it helpful!
Thank you
You’re welcome!
Amazing
Glad you liked it!
This tutorial has been great and really has me thinking about the way I create and format GSAP animations. Hope you're doing well, and hope to see a lot more of these video from you! Thanks Daniel.
Thank you - I'm glad you found it helpful! Also, thanks for the kind words. More videos coming 🤝
we need more videossss!!!! letsgooo
More coming 🤝🏻
That's a great tutorial mate! I wouldn't use Flip for this animation though, it would be easier to just animate clip-path
Thank you! Also appreciate your feedback - I'd be interested to hear how you would achieve this with clip-path as that would only animate the outer border and not the position + scale of the image? I did a similar animation with clip-path in my scroll animation video, but there it's all in the same html tag which makes it easier.
❤
Thanks for coming back man and dropping this amazing video. I missed your awsome videos.
Thank you so much 🙏🏻
Which browser is it?
Arc!
amazing videos... please no Js frameworks
Thank you! I will post more of this type of content 🤝🏻
@@danielhultcodes Thannk you a lot 🤝
Thank you for teaching us, really appreactiate it bro
Thank you for watching!
GOAT returns
goat comment 🤝🏻
thank you man from the idea breakthrough to the implementation and the way you talk us down through your thinking process you are awesome
I appreciate that! Thank you 🙏🏻
Glad to see another video Daniel, can't wait to finish this one!
Hope you enjoy it!
This is great sir, I tried to code along from your previous video but the constructor stuff was hard to get. But this is nice please keep doing it. Would love to see full website animation some day. Thank you.
That’s great to hear! I have bigger projects planned too 🤝🏻
Hello sir, Thank you for the great video, and can you tell which theme are you using?
It’s called Nord 🤝🏻
Please do complete tutorial series about to GSAP 🙂
I have it on my list!
Great content Daniel! Thanks a lot 🙏
Thank you Mohamed 🙏🏻
Never misses! Such awesome content <3
Thank you! Glad you like the topics!
Thanks a lot, keep going
Thank you!