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

Поделиться
HTML-код
  • Опубликовано: 28 ноя 2024

Комментарии •

  • @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.

  • @kevynlevine
    @kevynlevine Год назад +1

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

  • @peterpaul6953
    @peterpaul6953 10 месяцев назад

    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  10 месяцев назад

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

  • @peterpaul6953
    @peterpaul6953 10 месяцев назад +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  10 месяцев назад

      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 10 месяцев назад

      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?