Jump to content
GreenSock

karthikkrs

Members
  • Posts

    1
  • Joined

  • Last visited

Reputation

0 Newbie
  1. I am using "Section Slides (manual)" example from "http://scrollmagic.io/examples/advanced/section_slides_manual.html". When I try to implement the anchor tag link for this page i am not able to achieve the functionality. Below code for page scrolling $(function () { // wait for document ready // init var controller = new ScrollMagic.Controller(); // define movement of panels var wipeAnimation = new TimelineMax() // animate to second panel .to("#slideContainer", 0.5, {z: -150}) // move back in 3D space .to("#slideContainer", 1, {x: "-25%"}) // move in to first panel .to("#slideContainer", 0.5, {z: 0}) // move back to origin in 3D space // animate to third panel .to("#slideContainer", 0.5, {z: -150, delay: 1}) .to("#slideContainer", 1, {x: "-50%"}) .to("#slideContainer", 0.5, {z: 0}) // animate to forth panel .to("#slideContainer", 0.5, {z: -150, delay: 1}) .to("#slideContainer", 1, {x: "-75%"}) .to("#slideContainer", 0.5, {z: 0}); // create scene to pin and link animation new ScrollMagic.Scene({ triggerElement: "#pinContainer", triggerHook: "onLeave", duration: "500%" }) .setPin("#pinContainer") .setTween(wipeAnimation) .addIndicators() // add indicators (requires plugin) .addTo(controller); }); Below code i used for anchor tag click event // change behaviour of controller to animate scroll instead of jump controller.scrollTo(function (newpos) { TweenMax.to(window, 1, {scrollTo: {y: newpos}, ease:Power1.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 even update the URL. if (window.history && window.history.pushState) { history.pushState("", document.title, id); } } }); Please suggest me how to achieve anchor link functionality
×