I am trying to make a responsive svg animation on scrolling using the scrollMagic and it works well in Chrome and Opera, however thereis some bug in Firefox, Edge and IE9.
The problem with Firefox and Edge is when the window resized till 850px or smaller the animation does not work as starting point starts moving with the scrolling page.
The problem with IE9 is that animation does not start at all...
Here is the svg code:
<svg class="line" width="800px" height="1300" viewBox="0 0 800 1300">
<defs>
<style type="text/css">
@media screen and (max-width: 1920px) {
.desktopLine {
display: block;
}
.tabletLine {
display: none;
}
}
@media screen and (max-width: 850px) {
.desktopLine {
display: none;
}
.tabletLine {
display: block;
}
}
</style>
</defs>
<g class="desktopLine">
<path class="line1" fill="none" stroke="#fff" stroke-width="2" d="M460,0 L460,93 L535,165 L535,257 L20,257" />
<circle class="circle1" cx="20" cy="257" r="0" fill="#fff" />
<circle class="circle2" cx="20" cy="257" r="0" fill="none" stroke="#fff" stroke-width="2" />
<path class="line2" fill="none" stroke="#fff" stroke-width="2" d="M20,257 L20,567 L95,642" />
<circle class="circle3" cx="95" cy="642" r="0" fill="#fff" stroke="none" />
<path class="line3" fill="none" stroke="#fff" stroke-width="2" d="M75,622 L75,750 L150,750 M70,617 L70,755 L150,755" />
<path class="line4" fill="none" stroke="#fff" stroke-width="2" d="M372,755 L460,755 L470,750 M372,750 L740,750 L770,780" />
<circle class="circle4" cx="770" cy="780" r="0" fill="#fff" stroke="none" />
<path class="line5" fill="none" stroke="#fff" stroke-width="2" d="M690,750 L790,850 L790,1300" />
<path class="pointers" fill="none" stroke="#fff" stroke-width="2" d="M790,867 L775,867 L775,883 L790,883 M775,876 L767,876 M790,923 L775,923 L775,939 L790,939 M775,932 L767,932 M790,979 L775,979 L775,995 L790,995 M775,988 L767,988 M790,1035 L775,1035 L775,1051 L790,1051 M775,1044 L767,1044 M790,1091 L775,1091 L775,1107 L790,1107 M775,1100 L767,1100" />
</g>
<g class="tabletLine">
<path class="line1" fill="none" stroke="#fff" stroke-width="2" d="M550,0 L550,230 L30,230" />
<circle class="circle1" cx="30" cy="230" r="0" fill="#fff" />
<circle class="circle2" cx="30" cy="230" r="0" fill="none" stroke="#fff" stroke-width="2" />
</g>
</svg>
Here is the animation code:
function animateLine() {
function pathPrepare (element) {
var lineLength = element[0].getTotalLength();
element.css("stroke-dasharray", lineLength);
element.css("stroke-dashoffset", lineLength);
}
// Desktop Elements
var line1 = $(".line1"), line2 = $(".line2"), line3 = $(".line3"), line4 = $(".line4"), line5 = $(".line5");
var circle1 = $(".circle1"), circle2 = $(".circle2"), circle3 = $(".circle3"), circle4 = $(".circle4");
var pointers = $(".pointers");
pathPrepare(line1);
pathPrepare(line2);
pathPrepare(line3);
pathPrepare(line4);
pathPrepare(line5);
pathPrepare(pointers);
var lineController = new ScrollMagic.Controller(),
lineTween = new TimelineMax()
.add(TweenMax.to(line1, 2, {strokeDashoffset: 0, ease:Linear.easeNone}))
.add(TweenMax.to(circle1, 0.3, {attr:{r:8}}))
.add(TweenMax.to(circle2, 0.3, {attr:{r:16}}))
.add(TweenMax.to(line2, 2, {strokeDashoffset: 0}))
.add(TweenMax.to(circle3, 0.3, {attr:{r:4}}))
.add(TweenMax.to(line3, 2, {strokeDashoffset: 0}))
.add(TweenMax.to(line4, 2, {strokeDashoffset: 0}))
.add(TweenMax.to(circle4, 0.3, {attr:{r:4}}))
.add(TweenMax.to(line5, 2, {strokeDashoffset: 0}))
.add(TweenMax.to(pointers, 2, {strokeDashoffset: 0}))
var lineScene = new ScrollMagic.Scene({triggerElement: "path", duration: 1200, offset: 200, tweenChanges: false})
.setTween(lineTween)
.addIndicators({name: "line", colorEnd: "#fff"})
.addTo(lineController);
};
Thanks for any help!!
