Jump to content
Search Community

Unable to Implement Anchor Link Using TimelineMax

karthikkrs test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

 
Link to comment
Share on other sites

Hello karthikkrs, and Welcome to the GreenSock forum!

Sorry to hear your having trouble. Even though ScrollMagic is made with GSAP it is not made by GreenSock. ScrollMagic is made by Jan Paepke.

 

Here in the forums we try to stay focused on questions regarding the GSAP API. Your question seems more of how to use ScrollMagic, than how to use the GSAP API. ScrollMagic is a scrolling management system that uses GSAP as its main animation platform. I would recommend that you also ask your question on Jan Paepke's ScrollMagic issues page. Jan Paepke said to feel free and post your ScrollMagic question on his issues page

 

https://github.com/janpaepke/ScrollMagic/issues

 

You can also get assistance from the ScrollMagic Troubleshooting Guide:

 

https://github.com/janpaepke/ScrollMagic/blob/master/CONTRIBUTING.md

 

Maybe other users in the forum can provide assistance regarding ScrollMagic. But we are more than happy to help you if you have a question about the GSAP API.

Thanks! :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...