ScrollMagic + TweenMax: рисовать несколько путей SVG одновременно? - PullRequest
Новая
       81

ScrollMagic + TweenMax: рисовать несколько путей SVG одновременно?

0 голосов
/ 01 сентября 2018

Это мой скрипт для рисования SVG-пути с ScrollMagic : 

 // Prepare SVG
  function pathPrepare_journey($el) {
    var lineLength_journey = $el[0].getTotalLength();
    $el.css("stroke-dasharray", lineLength_journey);
    $el.css("stroke-dashoffset", lineLength_journey);
  }

  var $journey1 = $("path#path1");
  var $journey1_2 = $("path#path2");
  var $journey1_3 = $("path#path3");

  pathPrepare_journey($journey1);
  pathPrepare_journey($journey1_2);
  pathPrepare_journey($journey1_3);

  // Reference to container
  var container = $("#section1");
  var containerHeight = $(container).height();
  var vpHeight = $(window).height();

  // Init controller
  var SVGcontroller_journey = new ScrollMagic.Controller();

  // Build tween
  var tween_journey = new TimelineMax().add(
    TweenMax.to($journey1, 1, { strokeDashoffset: 0, ease: Linear.easeNone })
  );

  // Build scene
  var scene = new ScrollMagic.Scene({
    triggerElement: container,
    duration: containerHeight - vpHeight / 2,
    tweenChanges: true
  })
    .setTween(tween_journey)
    .addIndicators({
      name: "Draw Journey Lines#1",
      colorTrigger: "brown",
      colorStart: "brown",
      colorEnd: "brown",
      indent: 600
    })
    .addTo(SVGcontroller_journey);

Он прекрасно работает, но, как вы можете видеть, у меня есть три отдельных пути внутри SVG ($journey1, $journey1_2 & $journey1_3), и сцена ScrollMagic в настоящее время рисует только один из них, $journey1 потому что я смог добавить его только к TimelineMax().

Мой простой вопрос: как добавить другие пути, чтобы они рисовались одновременно с $journey1?

Мне удалось добавить другие пути, но они рисуются последовательно: 

// Build tween
  var tween_journey = new TimelineMax()
    .add(
      TweenMax.to($journey1, 1, { strokeDashoffset: 0, ease: Linear.easeNone })
    )
    .add(
      TweenMax.to($journey1_2, 1, { strokeDashoffset: 0, ease: Linear.easeNone })
    );

1 Ответ

0 голосов
/ 01 сентября 2018

Я понял, что могу ориентировать пути по классам внутри временной шкалы TweenMax, например: 

var tween_journey = new TimelineMax();
tween_journey.to(".cls-2", 1, { strokeDashoffset: 0, ease: Linear.easeNone });

Это анимирует / рисует все пути данного класса одновременно и, следовательно, решает мою проблему.

...