Javascript 使用Vivus.js和GSAP设置初始隐藏元素的动画
所以我有一个GSAP时间线,它应该首先设置淡入文本的动画,完成后它应该触发Vivus.js构造函数。但是,SVG元素在动画出现之前是可见的,这不是期望的效果。我试图以某种方式操纵它,但问题仍然存在——我会错过什么 理想的效果是在绘制自身时淡入 这是一支钢笔:Javascript 使用Vivus.js和GSAP设置初始隐藏元素的动画,javascript,jquery,animation,gsap,vivus,Javascript,Jquery,Animation,Gsap,Vivus,所以我有一个GSAP时间线,它应该首先设置淡入文本的动画,完成后它应该触发Vivus.js构造函数。但是,SVG元素在动画出现之前是可见的,这不是期望的效果。我试图以某种方式操纵它,但问题仍然存在——我会错过什么 理想的效果是在绘制自身时淡入 这是一支钢笔: 我不熟悉Vivus,但GSAP有一个工具(DrawSVGPlugin),它与Club GreenSock的好处一样(甚至更多),而且它可以无缝集成,因此您的30行代码可以压缩为3行: 如果您有任何其他问题,我鼓励您查看位于的GSAP论坛。
我不熟悉Vivus,但GSAP有一个工具(DrawSVGPlugin),它与Club GreenSock的好处一样(甚至更多),而且它可以无缝集成,因此您的30行代码可以压缩为3行: 如果您有任何其他问题,我鼓励您查看位于的GSAP论坛。这是一个很棒的社区(并不是说Stack Overflow不是——只是GreenSock论坛完全专注于GSAP相关的问题)。快乐的动画制作
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();
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});