Scrollytelling with GSAP in 12 Minutes! [MotionPath, ScrollTrigger]

แชร์
ฝัง
  • เผยแพร่เมื่อ 21 ธ.ค. 2024

ความคิดเห็น • 13

  • @heatherliu6856
    @heatherliu6856 ปีที่แล้ว +2

    SCROLLYTELLING I love it!

  • @pablocortes682
    @pablocortes682 ปีที่แล้ว +2

    This was awesome, thanks Web Bae!

  • @rtleary2
    @rtleary2 ปีที่แล้ว +2

    Man I love these! Is it possible to make it a custom icon that follows the path?

    • @webbae
      @webbae  ปีที่แล้ว

      Yea - could be anything - what you want?

    • @rtleary2
      @rtleary2 ปีที่แล้ว +1

      @@webbae was thinking a hiker emoji! or plane for a trip!

    • @webbae
      @webbae  ปีที่แล้ว

      @@rtleary2 both good ideas. Plane emoji for trip is a cool idea. With world map. My original though was to do a “California road trip” scene with a car haha.

    • @webbae
      @webbae  ปีที่แล้ว

      This one is really cool - I refer to it often. Really nice details with waves on the beach and tire smoke.

  • @peterpaul6953
    @peterpaul6953 11 หลายเดือนก่อน +1

    Hello Sir, this video is really a great one. Followed!
    I have a specific question about it. I want to have two paths that are running up the mountain. How can I achieve that? Lets say one more should go up on the right side. There are certain issues that come to my mind like right now the animation is following the path. I guess that needs to change and the mountain should be the center not the path anymore. What happens if one path is longer and one is shorter? I would greatly appreciate your answer. Thank you

    • @webbae
      @webbae  11 หลายเดือนก่อน

      You could probably achieve that by basically duplicating the code and illustrating another path. Might take some trial and error and help with AI but I’ll be you could get it!

    • @peterpaul6953
      @peterpaul6953 11 หลายเดือนก่อน

      So I am able to achieve the two (or even more) paths. But I am struggeling in animating them individually. I want to have one circle be much quicker than the other to show that the second part is the quicker one. All my trials are without success. Both are absolutely synchronus. Do you have a hint for me how to achieve that @@webbae?

  • @peterpaul6953
    @peterpaul6953 11 หลายเดือนก่อน

    Hello Sir, maybe you can comment one more time to a question? I have been able to achieve your Scrollytelling approach. Since I want to integrate that into a existing website I can not work with fixed postions. You mentioned that it could be achieved with sticky and relative settings. I am all new to webdesign and therefore have a hard time to achieve that. I tried it a complete day but without success. Could you help me out with a more detailed description which position settings are needed? Thank you

    • @webbae
      @webbae  11 หลายเดือนก่อน

      Hard to answer without an example - that’s what the Discord is for though!

  • @kevynlevine
    @kevynlevine ปีที่แล้ว +1

    Could be useful for showing a path someone used to climb a mountain! 😉