Mat_Kon
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Mat_Kon
-
-
Hi everyone,
I'm trying to achieve this, when someone reaches my website from an external link like "www.test.co/#menu" scrolls directly to the section related with that id. I followed the example in the codepen to achieve the scrolltrigger functionality, so it is possible to mix the things together? Maybe because the sections are in absolute I'm facing issues.. Let me know!
I've already tried something like this without success:if (window.location.hash) {
var hash = window.location.hash;
console.log(hash);
let getPosition = getScrollLookup(".panel:not(:last-child)", {
start: "top top",
});
console.log(getPosition(hash));
// then later, use the function as many times as you want to look up any of the scroll position of any ".section" element
gsap.to(window, {
scrollTo: getPosition(hash),
duration: 1,
});
}
See the Pen BaowPwo by GreenSock (@GreenSock) on CodePen
Scroll to section in page taking url hash /w ScrollTrigger enabled
in GSAP
Posted
Hey @Rodrigo thank you very much for your support!
Edit:
With your suggestion, I was able to achieve it, looking also at this post:
Basically, I managed everything as a timeline and then added the ScrollToPlugin to manage the scroll on load as follow:
gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
// gsap responsive controller
let mm = gsap.matchMedia();
// Array gsap for panels
const panels = gsap.utils.toArray(".panel:not(:last-child)");
// Initialize gsap only in desktop version
mm.add("(min-width: 990px)", () => {
// Set a timeline to control better the ScrollTrigger in the page
const timeline = gsap.timeline({
scrollTrigger: {
trigger: ".page--home",
start: "top top",
end: () => "+=" + innerHeight * panels.length,
scrub: true,
pin: true
},
});
// Set gsap scrollTrigger event on each panel
panels.forEach(function (e, i) {
timeline.to(
e,
{
yPercent: -100,
ease: "none",
stagger: 0.5,
},
i
);
});
/* Manage scroll to section on page load if hash in url */
if (window.location.hash) {
// Get hash
var hash = window.location.hash;
// Get the panel number by data attribute
let panelNumber = parseInt($(hash).data("panel"));
// Gsap scroll to the numbered section
gsap.to(window, { scrollTo: panelNumber * innerHeight });
}
});
// Set gsap zindex of each panel to show the first with the highest index (absolute panels)
gsap.set(".panel", { zIndex: (i, target, targets) => targets.length - i })
Hope this helps others with the same issue!