Scrollytelling con ScrollTrigger y GSAP paso a paso

Поделиться
HTML-код
  • Опубликовано: 13 сен 2023
  • 👉 Conoce nuestras vacantes actuales de tecnología en bit.ly/talento-tech-GDI
    En este vídeo te introducimos al scrollytelling con SVG
    Aquí tienes el enlace del código:
    Landing page en codepen: codepen.io/carmenansio/pen/ZE...
    Proyecto en codesandbox: codesandbox.io/s/infallible-h...
    Landing page: 2z9nyr.csb.app/
    Figma file: www.figma.com/community/file/...
    Este vídeos fue impartido por Carmen Ansio - UX Engineer. Le puedes encontrar en su perfil de LinkedIn:
    / carmenansio
    Y en twitter: / carmenansio
    Si quieres estar al tanto de todo lo que hacemos, puedes inscribirte aquí 👇
    garajedeideas.com/livecoding/...
    ----------
    Garaje de Ideas es un estudio de Diseño, Tecnología y Data. En este canal encontrarás tutoriales, cursos y ejemplos prácticos paso a paso de desarrollo web y programación.
    Podrás encontrar desde cursos de JavaScript, Node.js, D3.js, Vue3, Typescript, HTML, CSS, React... hasta cómo optimizar tu proceso de trabajo.
  • НаукаНаука

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

  • @Garajedeideas
    @Garajedeideas  10 месяцев назад +1

    👉 ¡En Garaje seguimos creciendo! Únete al equipo: bit.ly/talento-tech-GDI

  • @a.sestarlich9859
    @a.sestarlich9859 4 месяца назад

    Yo me he perdido cuando has dicho Scrollytelling 😂, excelente garcias por todo 😊

  • @dinael
    @dinael 10 месяцев назад +4

    🤯

  • @scorpiondev
    @scorpiondev 10 месяцев назад +3

    Muchas gracias! Interesante contenido!

  • @TICdoc_
    @TICdoc_ 10 месяцев назад +3

    Triggear ... me lo apunto.

    • @CarmenAnsio
      @CarmenAnsio 10 месяцев назад +1

      Ese y Gradiente son mis favoritos XD

  • @TICdoc_
    @TICdoc_ 10 месяцев назад +2

    Lo que comentas de no borrar nodos de la línea, diría que es porque las curvas bezier emplean cuatro puntos para su definición (hay otros tipos de curvas bezier que emplean más o menos puntos, según se definan a partir de un punto previo, o tengan otra representación). Si eliminas puntos, es posible que el programa de diseño no reconstruya bien la definición de la curva bezier y se líe en cuanto a las posiciones.

    • @CarmenAnsio
      @CarmenAnsio 10 месяцев назад +2

      Exacto! Es justamente lo que sucede, cuando intenta reconstruir el path Figma no es capaz de redefinir los nodos y la información que guarda en las coordenadas del SVG es incorrecta, con lo que al hacer el pintado con Greensock el resultado no es el esperado :(

  • @Alberto_APC91
    @Alberto_APC91 10 месяцев назад +2

    Carmen me gustaría aprender Css🙏🙏

    • @CarmenAnsio
      @CarmenAnsio 10 месяцев назад +1

      ¡¡Hola!! ¿Tienes alguna base sobre CSS o partes de 0?

    • @Alberto_APC91
      @Alberto_APC91 10 месяцев назад +1

      ​@@CarmenAnsio Tengo una base, pero me gustaria poder crear aplicaciones web más atractivas y con css mas optimizado. tienes cursos en alguna plataforma?

    • @CarmenAnsio
      @CarmenAnsio 9 месяцев назад +1

      @@Alberto_APC91 Voy a liderar un bootcamp sobre CSS en código facilito 😊