Is posible to do this with GSAP?

[Poylar]

https://gyazo.com/313a49ec416d5a126c0debc7dc6d0b63

I drew the animation that I want. Is it possible to do this with gsap? I'm not interested in animation, but snapping a line to the left or right side of the header so that it is kind of adaptive. also i know about leaderline.js , but this lib not popularity like gsap

[Dentsu Creative CZ]

You can make the "adaptive lines" by three divs which will look like you wish - the adaptiveness will be done just by regular CSS. And for the drawing you can make timeline consists of three steps (each step for each div).

 

Another solution can be draw/modify the svg dynamically by changing the `d` attribute in path element (https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths). And for the animation use a DrawSVG plugin from GreenSock.

[Poylar]

3 hours ago, isobarczechrepublic said:

Вы можете сделать "адаптивные строки" тремя div'ами, которые будут выглядеть так, как вы хотите - адаптивность будет обеспечена обычным CSS. А для рисования вы можете сделать временную шкалу состоящей из трех шагов (каждый шаг для каждого div).

 

Другим решением может быть динамическое рисование/изменение svg путем изменения атрибута `d` в элементе пути ( https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths ). А для анимации используйте плагин DrawSVG от GreenSock.

yes, but I want to "link" two blocks, regardless of their location. You can look at the library that I threw off, I'm looking for something similar to gsap

[mikel]

Hey @Poylar,

 

Without knowing your intention and the structure of the elements here is an example of animated polylines and rects.

 

See the Pen mdOMNrP by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel