Mat_Kon Posted April 12, 2023 Share Posted April 12, 2023 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 Link to comment Share on other sites More sharing options...
Rodrigo Posted April 12, 2023 Share Posted April 12, 2023 Hi @Mat_Kon and welcome to the GreenSock forums! Maybe the example from this thread could help you getting started with this: Unfortunately the codepen you posted does not have anything related to url hashes or something of the sort. The main idea is to add labels to a timeline controlled by ScrollTrigger and then find the corresponding label for the hash and scroll to the particular scroll position given by that label. Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
Solution Mat_Kon Posted April 13, 2023 Author Solution Share Posted April 13, 2023 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! Link to comment Share on other sites More sharing options...
Rodrigo Posted April 13, 2023 Share Posted April 13, 2023 Hi, In the example you linked in your first post the elements have a position absolute and the helper function you're using doesn't work in that case since the top position of every element is basically the same. That's why I suggested that example that uses labels and the percentage of the animation where each label is. Similar to this helper function: https://greensock.com/docs/v3/HelperFunctions#getScrollPosition But is great to hear that you got it working, great job!! 👍 Let us know if you have more questions. Happy Tweening! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now