Анимировать изначально скрытый элемент с помощью Vivus.js и GSAP - PullRequest
Новая
       27

Анимировать изначально скрытый элемент с помощью Vivus.js и GSAP

0 голосов
/ 18 мая 2018

Итак, у меня есть эта временная шкала GSAP, которая должна сначала анимировать появившийся текст, а при его завершении он должен запускать конструктор Vivus.js, который он делает.Однако элемент SVG виден до того, как происходит анимация, что не является желаемым эффектом.Я пытался каким-то образом манипулировать им, но проблема все еще здесь - что я мог упустить ..?

Желаемый эффект будет проявляться при рисовании самого себя.

Вот ручка: https://codepen.io/anon/pen/ELGawo

function initialAnimation() {
  var introText = $(".text-intro"),
    tlIntro = new TimelineLite({ onComplete: introFadeIn });
    tlIntro.from(introText, 1, { autoAlpha: 0 });
}

// Fade in and draw elements
function introFadeIn() {
  var graphic1 = $(".graphic1");

  tlIntrofadeIn = new TimelineLite({ onComplete: gr1Animate });
  tlIntrofadeIn
    .from(graphic1Elem, 1, { autoAlpha: 0 });
}

function gr1Animate() {
  new Vivus(
    "gr1",
    {
      type: "delayed",
      onReady: function(myVivus) {
        myVivus.el.style.visibility = "inherit";
      }
    },
    function(obj) {
      obj.el.style.visibility = "visible";
    }
  );
}

initialAnimation();

1 Ответ

0 голосов
/ 20 мая 2018

Я не знаком с Vivus, но GSAP имеет инструмент (DrawSVGPlugin), который делает то же самое (и многое другое), что и преимущество Club GreenSock, и интегрируется без проблем, так что ваши 30-иные строки кода могут быть сжатына 3: https://codepen.io/GreenSock/pen/de8f2fa2a6813213d0e258113b2b15bd/?editors=0010

var introTL = new TimelineLite({delay:0.5});
introTL.from(".text-intro, #gr1 circle, #gr1 text", 1, {autoAlpha:0})
  .from("#gr1 path", 2, {drawSVG:"0%", autoAlpha:0});

Если у вас есть какие-либо вопросы, я рекомендую вам посетить форумы GSAP по адресу https://greensock.com/forums/. Это фантастическое сообщество (не то, что переполнение стека'- просто форумы GreenSock полностью посвящены вопросам, связанным с GSAP).Счастливого оживления!

...