All Activity

hello,see my code is like the code of Carl the teacher.https://codepen.io/snorkltv/pen/dyabKKg In this code,if i want to add menu to going on the race without scrolling,what i need? My try is this and i dont know if this good direction.Than you again. HTML <div class="menu"> <ul> <li>Austria</li> <li>Hungary</li> <li>Italy</li> <li>Great Britain</li> <li>Bahrain</li> </ul> </div> JS lis.forEach((li, index) => { console.log("foreach") li.addEventListener("click", () => { console.log("clicked") gsap.to(window, {duration: 1, scrollTo:{y:".races div:nth-child(" + (index + 1) + ")"}}}); }); }); lis.forEach((li, index) => { console.log("foreach") li.addEventListener("click", () => { console.log("clicked") gsap.to(window, {duration: 1, scrollTo:{y:".races div:nth-child(" + (index + 1) + ")"}}}); }); }); lis.forEach((li, index) => { console.log("foreach") li.addEventListener("click", () => { console.log("clicked") gsap.to(window, {duration: 1, scrollTo:{y:".races div:nth-child(" + (index + 1) + ")"}}}); }); }

Hi I'm quite new to GSAP and having an issue I can't figure out. I have full width section that pins when it gets to the top of the window, then inside that section I have scrolltrigger which toggles the class on some tab sections to open them as you scroll. This works well until the browser is resized, then the markers for the tabs jump to the top of the page and therefore aren't being triggered any more. You can see it on the lower green section of my dev site https://avidd2024.dev.avidd-design.co.uk if (window.innerWidth > 640) { // Pin the tabs container when a tab title is active const tabsContainer = document.getElementById("pintrigger"); gsap.to(tabsContainer, { scrollTrigger: { trigger: tabsContainer, start: 'top 0', // When to start pinning at the top of the screen end: '+=1000', // Unpin after scrolling 1000px past the start pin: true, // Pin the element pinSpacing: true, // Maintain the pinned element's position invalidateOnRefresh: true } }); } // Loop through each tab title and define ScrollTrigger const tabTitles = document.querySelectorAll(".vertical .tabs-title"); tabTitles.forEach((tabTitle, index) => { gsap.to(tabTitle, { scrollTrigger: { trigger: tabTitle, start: "top top", // Start when top of tab title reaches top of screen end: "bottom top", // End when bottom of tab title reaches top of screen scrub: true, invalidateOnRefresh: true, toggleClass: { targets: tabTitle, className: "is-active" }, onToggle: (self) => { const panelId = tabTitle.querySelector('a').getAttribute('href'); const panel = document.querySelector(panelId); } } }); }); <section class="primary-color full-width" > <div class="block-tab-container" id="pintrigger"> <?php if (have_rows('repeater_content_tab')) { $counter = 0; ?> <ul class="tabs vertical" data-responsive-accordion-tabs="small-accordion medium-tabs" data-multi-expand="true" id="<?php echo esc_attr($id); ?>"> <?php while (have_rows('repeater_content_tab')) { the_row(); $tab_heading = get_sub_field('tab_heading'); $counter++; ?> <li class="tabs-title"> <a href="#tab<?php echo $counter?>-<?php echo esc_attr($id); ?>" aria-selected="true"> <div class="tabs-title-container"> <div class="text"><?php echo $tab_heading ?></div> </div> </a> </li> <?php } ?> </ul> <?php $counter = 0; ?> </div> <div class="tabs-content secondary vertical" data-tabs-content="<?php echo esc_attr($id); ?>"> <?php while (have_rows('repeater_content_tab')) { the_row(); $tab_content = get_sub_field('tab_content'); $counter++; ?> <div class="tabs-panel" id="tab<?php echo $counter?>-<?php echo esc_attr($id); ?>"> <?php echo $tab_content ?> </div> <?php } ?> </div> <?php } ?> </div> </section>

Hello, I am struggling to have scrolltrigger working from an iFrame (same domain, so no cross origin problems). I need to target the parents from the iframe. I tried to play with the trigger and scroller properties without succes... Is this even possible? Thanks for your help, Fred Here is a link to the demo.

The only area I'm aware of that may not be "compatible" is that GSAP's standard "no charge" license allows all uses (even commercial ones) EXCEPT if a fee is being collected from MULTIPLE users. It covers usage in projects where only a one-time development fee is charged, like an agency that's paid to build a fancy web site that's free for everyone to use. That's totally fine. If your website sells products that aren't GSAP-enhanced like clothing, widgets, food, etc., that doesn't require the commercial license either. It only matters if the thing for which a fee is collected uses GSAP in some way, and only if it's from MULTIPLE users. Basically, if you answer yes to any of these questions, it'd require the special commercial license that comes with "Business" Club GSAP memberships: Do you have multiple developers that need access to the bonus plugins like SplitText, ScrollSmoother, MorphSVG, etc.? Does your GSAP-enhanced website/game/product require the user to pay a fee to use? (like Netflix.com) Are you selling a GSAP-enhanced product to multiple end users? (like a website template, theme or game) Are you using GSAP in a game/app with optional paid features/upgrades? GSAP doesn't require any attribution whatsoever. We'd consider it an honor if you use GSAP in your student project. That's totally fine with us. Just beware that the GSAP files would be subject to the standard "no charge" GreenSock license. Maybe you could simply make a note in your license document that indicates as much? Like "This project is released under Creative Commons Attribution 4.0 license, except the GSAP files which are subject to the license at https://gsap.com/standard-license" 🤷‍♂️

thank you it was what i said in my last post, its good i havent errors but my code dont work.I need a solution to use ScrollToPlugin with my horizontal scroll.I dont know if i need to use ScrollToPlugin with my scrollTrigger or to do use it alone.

I'm participating in a student science project (iGEM) and we would love to build a fancy website with GSAP. All content created by iGEM teams and hosted on iGEM's websites must be available under the Creative Commons Attribution 4.0 license (or any later version). Thanks a lot for your support and help!

Thanks @mvaneijgen, will apply this. And share the perfect result here.

I think the following tutorial by our own @Carl will be helpful. Hope it helps and happy tweening!

I'm facing a little bug in my code. I tried onHover code is working fine, on simple hover out also it works smoothly. But when I try to come out of the button and click on the body, the animation gets stuck and not clearing all the props. I have attached the video below and the codepen link for better understanding. Screen Recording 2024-05-04 at 6.02.58 PM.mov

@GreenSock Thanks! that's exactly what I want. I guess I should learn more about CSS later.

If I understand your goal correctly, that's just a CSS thing - for an element to have a stacking order like that, it must have position: relative (or something besides static). https://codepen.io/GreenSock/pen/BaEgEOB?editors=0110

Hi, I started using gsap recently. and I have question about scroll and pin. in the code, I want to pin panel1 and when I scroll down the panel2 section flow over pinned panel1. because I want to show the content of panel2 while scrolling but I don't want pin panel2 like panel1. Right now I cannot see panel2. How can I fix this? thanks!

Hi, This would be my approach: https://codepen.io/GreenSock/pen/vYMqvNr Hopefully this helps. Happy Tweening!

Hi @mantiss, You can try checking for the window object so it works only on the browser and not during deploys or SSR (in case you have SSR in your project): if (typeof window !== "undefined") { gsap.registerPlugin(ScrollTrigger); } Although the useEffect/useLayoutEffect approach should work as well. Happy Tweening!

Hi @simran_evoco, This thread @mvaneijgen created should help you to achieve that: Happy Tweening!

Hi, Maybe these demos can help: https://codepen.io/GreenSock/pen/MWaWPmG https://codepen.io/GreenSock/pen/gOabMXv Happy Tweening!

It seems to me that the problem is here: const rotationAngle = 360 * (closestItemIndex / menuItemElements.length); When you go from 300 to 360 it goes from 300 to 0, so the dot goes all the way to 0 degrees instead of going to 360. The problem here is the logic to keep the dot going in the same direction. Right of the top of my head I can't think of something that solves this. Maybe wrap the degree values between large negative an positive values could be an option. Sorry I can't be of more assistance. Happy Tweening!

That did the trick. Thankyou!

You have a typo in your script tag. It's src and you have scr in your tag: <!-- Wrong --> <script scr=" https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollToPlugin.min.js"></script> <!-- Right --> <script src=" https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollToPlugin.min.js"></script> Hopefully this helps. Happy Tweening!

There are a few helper functions that can save you from figuring out the math/logic: To find the scroll position of a particular element: https://gsap.com/docs/v3/HelperFunctions/helpers/getScrollLookup/ To find the scroll position of a particular animation: https://gsap.com/docs/v3/HelperFunctions/helpers/getScrollPosition If you want to scroll to the start of the 2nd animation, for example, you could do this: https://codepen.io/GreenSock/pen/vYMqVVL?editors=1010 function getScrollPosition(animation, progress) { let p = gsap.utils.clamp(0, 1, progress || 0), nested = !animation.scrollTrigger, st = nested ? animation.parent.scrollTrigger : animation.scrollTrigger, containerAnimation = st.vars.containerAnimation, range = st.end - st.start, position = st.start + range * p; if (containerAnimation) { st = containerAnimation.scrollTrigger; return (st.start + (st.end - st.start) * (position / containerAnimation.duration())); } else if (nested) { let start = st.start + (animation.startTime() / animation.parent.duration()) * range, end = st.start + ((animation.startTime() + animation.duration()) / animation.parent.duration()) * range; return start + (end - start) * p; } return position; }

Hey, is great to hear that you were able to solve this. Honestly I never used Vitest before, the few times I worked with Jest and before that with Mocha and Chai. Thanks for reporting back and sharing your solution with the community, I'm sure many users will benefit from your generosity 💚 Happy Tweening!

Hi, Great to hear that you were able to find a solution and I hope that you get good news from the agency Thanks for sharing your solution 💚 Happy Tweening!

Thank you @Rodrigo I have been able to solve the issue, but your explanation nudged me in the right direction on solving the issue. Since I had to wait for GSAP instance to complete running. I was able to solve this by putting the test assertion in a waitFor function. So by doing this await waitFor(() => { const element = screen.getByText("String") expect(element).toHaveAttribute("aria-current", "page") }) All test passed

Hi, The ideal way would be to register the plugins is to do it in the outmost layout file, as shown in this demo: https://stackblitz.com/edit/stackblitz-starters-cxedmc?file=app%2Flayout.tsx Is worth mentioning though that there is absolutely no issue if a plugin is registered more than once, so you won't run into any issues if you do that. Hopefully this helps. Happy Tweening!