I'm using ScrollMagic and Greensock to create a "scroll to" feature, where the user clicks on a link in a persistent navigation, then the view is scrolled to the specified section down the page (a long page full of content and images). But in Safari (v 7.0.1), it scrolls fine about 80% of the time, the rest of the time, it gets stuck part way down scrolling to the selected section. It doesn't even look like it's getting stuck on some significant part of the page, it just gets hung in between seemingly random chunks of the page.
The content on the page is confidential, so I can't share the whole page, but I can share the script that's driving it. Am I doing anything wrong in the script that would cause it to get hung up part way through a scroll?
$(document).ready(function($) {
// build tween
var tween1 = new TimelineMax ()
.add([
TweenMax.fromTo("#trigger1 .image1", 1, {scale: 1, autoAlpha: 1, top: 1200}, {top: -1630, ease: Linear.easeNone}),
TweenMax.fromTo("#trigger1 .image2", 1, {scale: 1, autoAlpha: 1, top: 1300}, {top: -560, ease: Linear.easeNone}),
TweenMax.fromTo("#trigger1 .image3", 1, {scale: 1, autoAlpha: 1, top: 1200}, {top: -1630, ease: Linear.easeNone}),
TweenMax.fromTo("#trigger1 .image6", 1, {scale: 1, autoAlpha: 1, top: 1200}, {top: -1630, ease: Linear.easeNone}),
TweenMax.fromTo("#trigger1 .image4", 1, {scale: 1, autoAlpha: 1, top: 1300}, {top: -560, ease: Linear.easeNone}),
TweenMax.fromTo("#trigger1 .image5", 1, {scale: 1, autoAlpha: 0.3, top: 1200}, {top: -1600, ease: Linear.easeNone})
]);
// build scene
var scene1 = new ScrollScene({triggerElement: "#point1", duration: $(window).height()})
.setTween(tween1)
.addTo(controller);
// show indicators (requires debug extension)
//scene.addIndicators();
//Processing
var tween2 = new TimelineMax ()
.add([
TweenMax.fromTo("#trigger2 .image1", 1, {scale: 1, autoAlpha: 1, top: 900}, {top: -1330, ease: Linear.easeNone}),
TweenMax.fromTo("#trigger2 .image4", 1, {scale: 1, autoAlpha: 1, top: 900}, {top: -440, ease: Linear.easeNone}),
TweenMax.fromTo("#trigger2 .image5", 1, {scale: 1, autoAlpha: 0.3, top: 1200}, {top: -1600, ease: Linear.easeNone})
]);
// build scene
var scene2 = new ScrollScene({triggerElement: "#point2", duration: $(window).height()})
.setTween(tween2)
.addTo(controller);
//Imaging
var tween3 = new TimelineMax ()
.add([
TweenMax.fromTo("#trigger3 .image3", 1, {scale: 1, autoAlpha: 1, top: 900}, {top: -950, ease: Linear.easeNone}),
TweenMax.fromTo("#trigger3 .image4", 1, {scale: 1, autoAlpha: 1, top: 1300}, {top: -960, ease: Linear.easeNone}),
TweenMax.fromTo("#trigger3 .image5", 1, {scale: 1, autoAlpha: 0.3, top: 1200}, {top: -1600, ease: Linear.easeNone})
]);
// build scene
var scene3 = new ScrollScene({triggerElement: "#point3", duration: $(window).height()})
.setTween(tween3)
.addTo(controller);
//Advanced Imaging
var tween4 = new TimelineMax ()
.add([
TweenMax.fromTo("#trigger4 .image1", 1, {scale: 1, autoAlpha: 1, top: 1100}, {top: -1150, ease: Linear.easeNone}),
TweenMax.fromTo("#trigger4 .image2", 1, {scale: 1, autoAlpha: 1, top: 1300}, {top: -890, ease: Linear.easeNone}),
TweenMax.fromTo("#trigger4 .image5", 1, {scale: 1, autoAlpha: 0.3, top: 1200}, {top: -1600, ease: Linear.easeNone})
]);
// build scene
var scene4 = new ScrollScene({triggerElement: "#point4", duration: $(window).height()})
.setTween(tween4)
.addTo(controller);
//Reservoir Services
var tween5 = new TimelineMax ()
.add([
TweenMax.fromTo("#trigger5 .image1", 1, {scale: 1, autoAlpha: 1, top: 900}, {top: -900, ease: Linear.easeNone}),
TweenMax.fromTo("#trigger5 .image2", 1, {scale: 1, autoAlpha: 1, top: 1100}, {top: -340, ease: Linear.easeNone}),
TweenMax.fromTo("#trigger5 .image3", 1, {scale: 1, autoAlpha: 1, top: 1000}, {top: -240, ease: Linear.easeNone}),
TweenMax.fromTo("#trigger5 .image4", 1, {scale: 1, autoAlpha: 1, top: 900}, {top: -140, ease: Linear.easeNone}),
TweenMax.fromTo("#trigger5 .image5", 1, {scale: 1, autoAlpha: 0.3, top: 1200}, {top: -1600, ease: Linear.easeNone})
]);
// build scene
var scene5 = new ScrollScene({triggerElement: "#point5", duration: $(window).height()})
.setTween(tween5)
.addTo(controller);
//Resize fixer
$(window).on("resize", function () {
// update duration.
scene1.duration($(window).innerHeight());
scene2.duration($(window).innerHeight());
scene3.duration($(window).innerHeight());
scene4.duration($(window).innerHeight());
scene5.duration($(window).innerHeight());
});
});