Hey all,
I've been using Greensock and Scrollmagic to create a rather complex set of animations. Here is a link to the current demo: https://confident-sinoussi-6364a8.netlify.com/
My issue is that the animation feels rather choppy, and with mouse wheels that are clicky, it's super jumpy. ALSO, in Safari, after every new scene slides up into view, the old one flashes for a second right behind it.
The way im doing these animations is by adding every scene to an html file as individual inline svgs. Then I use greensock to create the tweens for each individual scene like this:
function scene1() {
/***********************/
/* Scene 1 (Cavemen) */
/***********************/
//Scene 1 parts (Cavemen)
var s1Title = select('#Title_Card_1'),
s1 = select('.scene1'),
s1TitleSlide = select('#Title_Card_Slide_1'),
s1ArmStart = select('#s1_Girl_Arm_Start'),
s1ArmMiddle = select('#s1_Girl_Arm_Middle'),
s1ArmEnd = select('#s1_Girl_Arm_End'),
s1Fish = select('#s1_Fish'),
s1ManArmStart = select('#s1_Man_Arm_Start'),
s1ManArmEnd = select('#s1_Man_Arm_End'),
s1LeashStart = select('#s1_Leash_Start'),
s1LeashEnd = select('#s1_Leash_End')
var tl1Main = new TimelineMax({paused:false});
var tl1Animations = new TimelineMax({paused:true});
tl1Main
.fromTo(s1, 1, {y:1000}, {y:0})
.fromTo(s1Title, 0.5, {autoAlpha:0}, {autoAlpha:1, onComplete: function() {
tl1Animations.play();
}, onReverseComplete:function(){
tl1Animations.reverse();
}})
.from(s1TitleSlide, 1, {x:-460, ease:Linear.easeNone})
tl1Animations
.to(s1ArmStart, 0.5, {morphSVG:s1ArmMiddle, ease:Linear.easeNone}, 0.3)
.to(s1Fish, 0.5, {x:30, y:20, ease: Linear.easeNone}, 0.3)
.to(s1ManArmStart, 0.5,{morphSVG:s1ManArmEnd, ease: Linear.easeNone}, 0.3)
.to(s1LeashStart, 0.5,{morphSVG:s1LeashEnd, ease: Linear.easeNone}, 0.3)
.to(s1ArmStart, 0.4, {morphSVG:s1ArmEnd, ease:Linear.easeNone}, 0.8)
.to(s1Fish, 0.4, {x:32, y:36, ease:Linear.easeNone}, 0.8)
return tl1Main;
}
Each scene has a seperate set of animation that trigger when a user scrolls to a new scene, and a set of animations that are linked to the scroll with Scrollmagic.
All of these scene functions are then added to a master timeline like this:
var masterTimeline = new TimelineMax();
masterTimeline
.add(sceneIntro())
.add(scene1(), '-=0.6')
.add(scene2())
.add(scene3())
.add(scene4())
.add(scene5())
.add(scene6())
.add(scene7())
.add(scene8())
.add(scene9())
.add(scene10())
.add(scene11())
.add(scene12())
.add(scene13())
.add(scene14())
.add(scene15())
.add(scene16());
var controller;
$(function() {
controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
duration: '6000%'
})
.setPin('#scene-wrapper')
.setTween(masterTimeline)
.addTo(controller);
});
And that's how we get the animation you see in my demo. I know a bunch of heavy svg's are being animated at once and that's probably the major cause for slowdown. I've lightly explored a bunch of options like debounce, and possibly porting this over to canvas but none of these routes seem that feasible at the moment. Any information or insight on how I can improve this product would be HUGELY appreciated.
Thanks dudes!