Utilizing ScrollMagic “natural wipe” on three section with Anchor Navigation

2 Views

I am attempting to add natural wipe to a three (3) section page. On two of the sections there is “additional content” which made for a struggle in the beginning. Now that this is working with scrollmagic and navigation links the only item left is section wipe the three sections without losing the moving scroll animation.

take a look at this codepen it should explain the problem at hand. Thanks in advance!

Read More

http://codepen.io/sandovalg/pen/BoKzxB 

// Init controller
var controller = new ScrollMagic.Controller({
globalSceneOptions: {
duration: $('section').height(),
triggerHook: .025,
reverse: true
}
});

var scene1 = new ScrollMagic.Scene({ triggerElement: '#intro' })
                            .setClassToggle('#intro-anchor', 'active')
                            .addTo(controller);
var scene2 = new ScrollMagic.Scene({ triggerElement: '#section-1' })
                            .setClassToggle('#anchor1', 'active')
                            .addTo(controller);
var scene3 = new ScrollMagic.Scene({ triggerElement: '#section-2' })
                            .setClassToggle('#anchor2', 'active')
                            .addTo(controller);
// Change behaviour of controller
// to animate scroll instead of jump
controller.scrollTo(function(target) {

TweenMax.to(window, 0.5, {
scrollTo : {
  y : target,
  autoKill : true // Allow scroll position to change outside itself
},
ease : Cubic.easeInOut
});

});


//  Bind scroll to anchor links
$(document).on("click", "a[href^=#]", function(e) {
var id = $(this).attr("href");

if($(id).length > 0) {
e.preventDefault();

// trigger scroll
controller.scrollTo(id);

// If supported by the browser we can also update the URL
if (window.history && window.history.pushState) {
  history.pushState("", document.title, id);
}
}

});
Post Views: 2

Related posts