Move to a certain position in a timeline with a button

[Mitralyx]

Hey everyone!

 

My goal is to make the button autoscroll to a certain position of my timeline, per example the button "devBtn" will scroll down the user to the ".dev" part.

 

I've tried that but its not working... Any ideas ?

 

    gsap.registerPlugin(ScrollTrigger);
    gsap.defaults({ease: "none", duration: 2});

    let page = gsap.utils.toArray(".portfolioPage")
    const tl = gsap.timeline();

    tl.from(".graphisme", {opacity:0})
        .from(".audiovisuel", {opacity:0})
        .from(".marketing", {opacity:0});

    ScrollTrigger.create({
        animation: tl,
        trigger: "#portfolioContainer",
        start: "top top",
        end: "+=2000",
        scrub: true,
        pin: true,
        anticipatePin: 1,
        snap : 1 / (page.length - 1),
        /* markers : true, */
    });

    var devBtn = document.getElementById('dev-btn')
    var graphismeBtn = document.getElementById('graphisme-btn')
    var audiovisuelBtn = document.getElementById('audiovisuel-btn')
    var marketingBtn = document.getElementById('marketing-btn')

    devBtn.onclick = function () {
        TweenMax.to(window, 0.5, {
            scrollTo: {
                y: $(".portfolioPage.dev" + page).offset().top
            }
        })
    }
    graphismeBtn.onclick = function () {

    }
    audiovisuelBtn.onclick = function () {

    }
    marketingBtn.onclick = function () {

    }

 

[PointC]

Hi @Mitralyx

 

Welcome to the forum.

 

It's a little hard to say without a demo, but a cursory glance would have me first ask if you have loaded the ScrollToPlugin? That is different than the ScrollTrigger plugin.

 

If you could put that into a demo, we can get you some better answers.

You should also use the GSAP3 syntax. So it would be:

gsap.to(window, {scrollTo: ".portfolioPage.dev" + page})

More info about migrating.

Happy tweening.