inflearn logo
inflearn logo

Creating a portfolio using GSAP's ScrollTrigger

Let's create an interactive, responsive web portfolio that reacts to scrolling using GSAP's ScrollTrigger!

(5.0) 41 reviews

359 learners

Level Basic

Course period Unlimited

HTML/CSS
HTML/CSS
scrolltrigger
scrolltrigger
gsap
gsap
Portfolio
Portfolio
Responsive Web
Responsive Web
HTML/CSS
HTML/CSS
scrolltrigger
scrolltrigger
gsap
gsap
Portfolio
Portfolio
Responsive Web
Responsive Web
날개 달린 동전

Course 추천하고 성장과 수익을 만들어 보세요!

날개 달린 동전

Marketing Partners

Course 추천하고 성장과 수익을 만들어 보세요!

Reviews from Early Learners

Reviews from Early Learners

5.0

5.0

너굴이

30% enrolled

I'm currently a web publisher, but my portfolio is lacking, so I'm not getting job offers. I'm diligently taking classes, and my goal is to complete this course and create a portfolio site that showcases my own story and impressive interactions, not just for the sake of a job change. Thank you for explaining in a fun and easy-to-understand way. I will definitely succeed in getting a job!

5.0

제니

100% enrolled

Taking this course, I learned a lot about creating scroll animations using GSAP's ScrollTrigger. The course content was practical, which was a great help in creating interactive websites that truly capture users' attention. My understanding of creating layouts using HTML and CSS also improved, allowing me to decorate my own portfolio more stylishly. In particular, the trendy portfolio creation tips were continuously updated, and being able to apply them directly to real-world work was truly beneficial. Thanks to the instructor's kind explanations and practice-oriented classes, I gained confidence in tackling projects.

5.0

마르크스

25% enrolled

My understanding of animation implementation has definitely improved. Instead of just teaching grammar, they explained in detail how to actually use it through examples, which was a great help in improving my skills. It's structured in a way that even I, a non-major, can follow easily, so I'd recommend it to anyone! The best thing is that I can choose and watch only the parts I was curious about!

What you will gain after the course

  • Tips for Creating a Portfolio to Get a Job at an Agency

  • GSAP's ScrollTrigger Animation

  • Scroll direction-aware navigation

  • Creating SVG Animations Chronologically

  • Layout creation techniques using HTML/CSS

  • Creating Scrolla Animations that React to Scroll

  • Responsive web publishing production for various devices.

  • Implementing fancy interactions through JavaScript library plugins

  • Interactive design implementation tips for creating a personal portfolio

If you want to create a portfolio that catches the eye and captivates interviewers' hearts,
pay attention! 🙋‍♂️

Updating February 2025 Large Corporation & Agency Success Stories

* February 2025 Agency Acceptance Portfolio Revealed
In-depth Analysis of Large Agency Acceptance Portfolio Cases (To be released as a series)

* 2024 Second Half Agency Acceptance Portfolio Revealed
In-depth analysis of large-scale agency acceptance portfolio cases!





2023년,
에이전시에 합격한 포트폴리오
사례살펴보기!

✨ Don't you want to create this kind of visual portfolio yourself?


Recommended for these people

Those who want to create a spectacular website
using GSAP's ScrollTrigger

Those who want to create a portfolio that can pass agency
selection

Those who want to implement
spectacular interactions that match
the latest 2023 trends

GSAP Scroll Trigger
Animation from
basics
to advanced applications for those who want to learn

For everyone who wants to
create a web portfolio 🌱

This course is not just a theoretical job success guide, but allows you to learn the essential elements needed for portfolio creation by examining actual portfolio examples from students who were accepted at agencies and large in-house companies in 2023, and plan a portfolio for successful employment!

You can learn not only how to create scroll animations using GSAP's ScrollTrigger, but also how to create interactive websites that catch users' attention and respond to mouse interactions. You can also improve your understanding of layout creation using HTML and CSS. We'll continuously update you with trendy portfolio creation tips too!


Learning Content 📚

🫡 This course is!

  • Let's explore how to create portfolios that impress interviewers by examining portfolio examples from students who were accepted to agencies in 2023.
  • Let's explore the essential parts needed for portfolio planning.
  • Let's learn the basics and practical applications of GSAP's ScrollTrigger, which won overseas awards in 2023 and is being hotly utilized for website creation at large-scale domestic agencies.
  • You can learn Header area Scroll Direction Events.
  • Create an event where the navigation bar detects the scroll direction, disappearing when scrolling down and appearing when scrolling up.
  • Creating Animation Using SVG
  • Creating MouseHover Effect Animation Using Splitting.js
  • Creating Text Animation Using 3D Properties
  • You can create a flowing background banner using SimplyScroll.
  • You can implement spectacular interactive web experiences using GSAP's ScrollTrigger.
  • Responsive Web(max-width: 1650px) can be created.
  • Responsive Web(max-width: 1300px) can be created.
  • Responsive Web(max-width: 800px) can be created.
  • Responsive Web(max-width: 500px) can be created.
  • This is the 1st_update video.
  • This is an image and text animation that appears in response to scrollTrigger.
  • This is the second update video.
  • I created a gallery that scrolls along the X-axis.
  • 2nd_Update Video Responsive Web
  • This is a responsive web gallery area that scrolls along the X-axis.
  • This is the 3rd update video.
  • Let's create a gallery that scrolls along the Y-axis.
  • This is the 4th update video.
  • Let's create an image that follows the mouse pointer.
  • This is the 5th update video.
  • This is an interaction where sections are fixed on the Y-axis and subsections scroll.
  • This is the 6th update video.
  • Let's create a gallery that scrolls while swaying left and right along the X-axis.
  • This is the 7th update video.
  • Let's create a character that greets you when you scroll.
  • Let's create a text animation that fills according to mouse movement.
  • Let's create a wavy text animation using Clip_path.

  • This is the 8th_1. update video.
  • This is how to create an animation that scrolls horizontally and infinitely repeats when scrolling down.
  • This is an animation I created where an image that's rotated and floating along the Z-axis comes back to its original position and unfolds when scrolling.

  • This is the 8th_2nd update video.
  • This is an animation where text gets filled with color when scrolling.

  • This is the 9th_1. update video.
  • 스크롤시 샤방샤방하게 진행되는 GSAP ScrollTrigger Animation입니다
  • This is the 9th_2nd update video.
  • Animation that Twists on the Z-axis Using Position: Sticky

Expected Q&A

Q. What can I learn by taking this course?

You can understand the UI/UX process and plan and create your own portfolio accordingly, and if you are currently a working professional, you can implement more trendy and interactive responsive web designs.

Q. What additional content will be updated?

1. UI/UX processes you need to know in practice and how to plan and design a portfolio based on them

2. References that can be applied to portfolio creation for getting jobs as UI/UX designers, web publishers, and frontend developers

3. Applied examples needed for trendy and interactive web development will be updated.
4. For smoother learning, if you join the Jalnan Web Design open chat room operated by J.young,
we'll share essential tips and free webinar links related to Figma, UI/UX, coding, and portfolio creation.

Open chat room name: Jalnan Web Design
Code: jyoung

Recommended for
these people

Who is this course right for?

  • For those who want to create a high-quality portfolio that can get them accepted into an agency.

  • Anyone curious about portfolio examples that got accepted into agencies.

  • For those who want to create a trendy and glamorous portfolio.

  • Anyone who wants to learn GSAP's ScrollTrigger

  • Someone who wants to create a website with flashy interactions.

  • For those who want to implement fancy interactions using HTML/CSS/jQuery rather than difficult JavaScript.

Need to know before starting?

  • HTML/CSS basics, layout creation basics, JavaScript basics

Hello
This is jyoung

9,112

Learners

367

Reviews

227

Answers

4.8

Rating

14

Courses

"I am J.Young, your design and development portfolio mentor."

I have run a web design and app development company for the past 20 years, experiencing the intensity of the field firsthand. Based on that experience, I am currently dedicated to nurturing future experts at universities and professional educational institutions, covering everything from UI/UX design to front-end development.

My teaching philosophy is clear.

  1. From basics to practice, a seamless connection

  2. A compression of core skills desired by the industry

  3. Achieving Employment Success through a Practical Portfolio Completion

For those who feel overwhelmed and don't know where to start, office workers dreaming of a career change but lacking time, and beginners who feel like coding is a world away—I will turn my 20-year journey into your shortcut. Until the day you stand tall as a professional, I will do my best to be your reliable mentor and help you every step of the way.

J.young will help you!!
Also!! If you have any questions while studying, please leave a comment and
I will do my best to provide a helpful answer.

Professional Experience

- 2017~Present) Web Development Director
- 2015~2017) Executive Director at Eliesel Co., Ltd.
- 2003~2015) Executive Director at Amusingwear Co., Ltd.
- 2003: Design Manager at Seowoo C&D


- Current)
- UI/UX Web Planning/Design/Front-end Bootcamp Instructor (EZEN DX Academy - Seocho Branch)
- Professional lectures and group/individual tutoring for design and development portfolios


* YouTube channel in operation (Coding Designer)

For smoother learning, if you join the Jalnan Web Design open chat room operated by J.young,
I will provide answers to lecture questions and feedback on your portfolio.

- Open Chat Room Name: Jalnan Web Design
- Code: jyoung

 

More

Curriculum

All

75 lectures ∙ (10hr 13min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

41 reviews

5.0

41 reviews

  • jyjl825568님의 프로필 이미지
    jyjl825568

    Reviews 3

    Average Rating 5.0

    5

    31% enrolled

    • merrybmc님의 프로필 이미지
      merrybmc

      Reviews 1

      Average Rating 5.0

      5

      100% enrolled

      While preparing for a web publisher job, what I always worried about was 'How can I create a portfolio that stands out?' I really wanted to include interaction effects, which are a current trend, but I couldn't grasp it at all by self-studying... I searched YouTube, but something always seemed missing, and I was struggling for a long time. Then I took this lecture by J.young, and I want to say it's truly a life-changing course! Instead of just having us follow along with animations using ScrollTrigger, they helped us get a 'feel' for how to apply them in an actual portfolio. The examples were so trendy that even while following the lecture to create them, I naturally thought, 'Wow, I need to use this in my portfolio right away!' Especially since the instructor explained everything step-by-step at a beginner's level, even someone like me, who's a coding novice (?), could comfortably finish the course. When I got stuck in the middle, I was so grateful that they kindly answered my questions when I posted them in the community. Thanks to that, as I applied wonderful interactions one by one to my own portfolio, I even gained confidence, thinking, 'Ah, I can do things like this too!' Now, my completely plain portfolio has transformed into a dynamic website that is vibrant and can really grab viewers' attention. This kind of lecture is truly the best, to the point where I want to keep it to myself! Instructor, thank you so much for the great lecture, and I look forward to the next one 😊💖

      • tomango님의 프로필 이미지
        tomango

        Reviews 1

        Average Rating 5.0

        5

        30% enrolled

        • yobab07121584님의 프로필 이미지
          yobab07121584

          Reviews 4

          Average Rating 5.0

          5

          6% enrolled

          I am a student who has taken several of Mr. J.young's lectures. I think gsap scroll trigger is one of the libraries that designers who like interaction cannot miss. However, JavaScript is somewhat difficult for designers, but the teacher explained it as easily as possible. There are several people who teach gsap at Inflearn, but the reason I liked this lecture the most is that it is familiar to designers. Especially, since I learned based on trendy cyan, my desire to learn increased even more ㅎㅎ 👉 I definitely recommend it to designers who are interested in coding. 👉 I think it will be helpful for those who are creating a new portfolio this time. 👉 I think it will definitely be applied to practical work for those who are simply interested. Thank you so much for making such a great lecture.💕 Above all, I appreciate that you give me your attention as quickly as possible when I ask you a question.

          • jyoung
            Instructor

            Sir~ Thank you so much for your sincere course review. I am also a designer...I think it is inevitable that I want to teach only when I like the design~~ If the design is pretty...I get the desire and motivation to make it.. Thank you again for your sincere course review^^ Have a nice weekend^^ J.young Dream

        • onlyjuhee7058님의 프로필 이미지
          onlyjuhee7058

          Reviews 1

          Average Rating 5.0

          5

          15% enrolled

          jyoung's other courses

          Check out other courses by the instructor!

          Similar courses

          Explore other courses in the same field!

          $51.70