Rodrigo

Hi, As far as I can see the codepen in Cassie's last post seems to work the way you expect. If you have other specs in your setup then be sure to include or them in your minimal demo in order to get a better idea of what you're trying to do. Maybe the issue could be your HTML and CSS more than a GSAP specific problem. First try to create an HTML/CSS setup that looks the way you intend, then start creating your animations without ScrollTrigger. Once your animations do exactly what you want, then add ScrollTrigger to the mix. Happy Tweening!

Hi @hoxifo and welcome to the GreenSock forums! There are a few approaches I can think for this. The simplest one is to wrap both sections in a container and pin that container: https://codepen.io/GreenSock/pen/VwENjYd Hopefully this helps. Happy Tweening!

Hi, Thanks for providing information about this. I'm not all that familiar with Svelte Transition yet, but normally other frameworks like Vue or packages like React Transition Group, have explicit in/out animation types for routes, so that allows you to move out a page before moving the other. Also they include ways to tell the Transition component/function that the animation is completed in order to, once the page transition is done, create your GSAP instances at a normal state soto speak and not midway the page transition animation. Happy Tweening!

Hi @WeDesignTech and welcome to the GreenSock forums! Thanks for being a Club GreenSock member and supporting GreenSock! 💚 Using videos is not the best possible way to give you support. The only thing I was able to spot is the code queue you're setting in wordpress. You have your custom js file first and then all your GSAP files and plugins. Your custom js should have as a dependencie all the GSAP core files and plugins so you have certainty that is being executed after the GSAP core and plugins are loaded. For more information about using GSAP in wordpress check this page: Hopefully this helps. Happy Tweening!

Hi, On top of @mvaneijgen's great advice, maybe you could take a look at this codepen example: https://codepen.io/GreenSock/pen/XWxOwVp Hopefully this helps. Happy Tweening!

Hi @Dean Draper and welcome to the GreenSock forums! Thanks for being a Club GreenSock member and supporting GreenSock! 💚 You can use the getProperty method for that: https://greensock.com/docs/v3/GSAP/gsap.getProperty() Also another option could be the revert method that every GSAP Tween/Timeline has: https://greensock.com/docs/v3/GSAP/Tween/revert() If you keep having issues, please remember to include a minimal demo so we can have a better look at what could be the problem. Hopefully this helps. Happy Tweening!

Hi, You can also give the Horizontal Endless Loop helper function a try: https://greensock.com/docs/v3/HelperFunctions#loop Here is a super simple example in React: https://stackblitz.com/edit/vitejs-vite-auctqy Hopefully this helps. Happy Tweening!

Hi, What particular part of your animations is not working? You have over 400 lines of HTML and almost 200 lines of JS. We don't have the time resources to comb through all that code in order to find what is not working and why, especially if you're not specific about it. Happy Tweening!

Hi @SImonR82 and welcome to the GreenSock forums! It's really hard for us to troubleshoot an issue without a minimal demo, but this might stem from the fact that you're not properly cleaning up in your effect hook. From version 18 React has strict mode which runs the effect hooks (useEffect and useLayoutEffect) twice which creates a very unique problem with from instances as explained here: That's why we have GSAP Context now: https://greensock.com/docs/v3/GSAP/gsap.context() So your effect hook should look like this: useEffect(() => { const ctx = gsap.context(() => { // All your GSAP instances in here }, scope); return () => ctx.revert(); // <- Super easy cleanup }, []); Also we always recommend using the useLayoutEffect, especially if you plan on using ScrollTrigger and/or Flip plugins. In the case of Next you can use this approach: https://greensock.com/react-advanced#useIsomorphicLayoutEffect Finally I recommend you to take a look at the resources in this page: Hopefully this helps. Happy Tweening!

Hi, Indeed you never mentioned that this was a GSAP issue. Me mentioning that falls into the fact that we have to keep these forums focused on GSAP related issues, not issues related to other frameworks, that's all. Luckily I had a few moments to spare and create the example for you, but only because it didn't require a lot of times. Have a look at the courses I posted before in order to learn more about Vue. For any GSAP related question, we're here for you!! 💚 Happy Tweening!

Hi, This might not be the easiest of things. One option is to add/remove an event listener to the document.body element, that prevents the default for the scroll event and the touch ones: https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event But having a scroll bar and the content not moving should be misleading and probably bad UX. Another option is to set the document.body overflow to hidden until the conditions you set (be explicit about those to the users, otherwise this is also terrible UX) are met. Here is a fork of your codepen that somehow works: https://codepen.io/GreenSock/pen/WNamKNv Hopefully this helps. Happy Tweening!

Hi @iDVB, That's unfortunately one of the tradeoffs of RTF and using canvas (THREE in this particular case). When using THREE directly I imagine that you can create variables or constants for each element, but with RTF being high order components that create a THREE object, you have no other choice. The one alternative I can think of is to create a method (ref should also run as a callback) and create an object with useRef in order to have a central immutable store for all your elements. const threeRefs = useRef({}); const createRef = (name, e) => { threeRefs.current[name] = e; }; return ( <main> <RTFElement ref={(e) => createRef("myCube", e)} /> </main> ); The code above assumes that the ref in a RTF component returns the actual reference to the rendered THREE element in the canvas. Hopefully this helps. Happy Tweening!

Hi, On top of Jack's advice we have this starter template for Next with the app folder so you can take a look https://stackblitz.com/edit/nextjs-ysf649 Hopefully this helps. Happy Tweening!

Hi, Once again this is a Vue related issue, not a GSAP one. You have to watch for the selected category on your menu items and not animate all of them in every single one. Is too much redundancy and possible a performance issue. You have to learn about Vue, in this case watchers and reactivity: https://vuejs.org/guide/essentials/watchers.html https://vuejs.org/guide/essentials/reactivity-fundamentals.html I forked your example and made the changes in it: https://stackblitz.com/edit/vue-xt8b87?file=src%2FApp.vue,src%2Fcomponents%2FmenuCategoryName.vue Hopefully this helps. Happy Tweening!

Hi, I see that you have will-change: transform applied to the smooth content element. Try adding the normalizeScroll option in the ScrollSmoother config: /*------------------------------ Register plugins ------------------------------*/ gsap.registerPlugin(ScrollTrigger, ScrollSmoother); /*------------------------------ Init ScrollSmoother ------------------------------*/ // No need for this here since it goes inside ScrollSmoother // ScrollTrigger.normalizeScroll(true); // create the scrollSmoother before your scrollTriggers const scrollerSmoother = ScrollSmoother.create({ smooth: 1, effects: true, smoothTouch: 0.1, normalizeScroll: true, }); Give that a try and let us know how it works. Happy Tweening!

Hi, I've been fiddling with your demo for a while and can't really find a way to make it work. The normal approach for doing this is checking a specific ScrollTrigger instance, get it's start and end points and based on the link being clicked (assuming that the progress of the ScrollTrigger is spread evenly between the amount of links). In this case you're using ScrollSmoother which internally has a ScrollTrigger instance to track everything. Our best bet is to plug into that since is the one controlling the ScrollSmoother progress. Also you can use ScrollSmoother scrollTo() method so you don't have to use jQuery animate method. This seems to work: let anchorLinks = component.find("[tr-anchors]").children(); anchorLinks.on("click", function () { let myIndex = $(this).index(); const st = smoother.scrollTrigger; const distance = st.start + ((st.end - st.start) * (myIndex / anchorLinks.length)); smoother.scrollTo(distance + 1, true); }); Now I stated that I couldn't really find a way to work and that's because I had to add that magic number (1) there: smoother.scrollTo(distance + 1, true) that makes me a bit uncomfortable to be honest, but unfortunately your demo is not the smallest and simplest around, so follow it is a bit complicated. That at least takes you to the start of each section. Also you have a lot (and I mean a lot!) of warnings of gsap not finding some targets in the console. IDK if this is because there are things missing in the HTML or if you have those in your development environment as well. Maybe those are connected or they're not 🤷‍♂️ Here is a fork of your demo. Notice that I removed the snapping functionality since it was also causing issues as well: https://codepen.io/GreenSock/pen/BaqbNzG Finally I think you are overcomplicating this quite a bit. If I was you I'd try to keep everything on just one Timeline and use ScrollTrigger for that timeline, since every animation is connected. There is no need for multiple timelines and ScrollTrigger instances. That could be one of the causes for the issues you're having. This is a similar example but far simpler in terms of how the animations are constructed: https://codepen.io/GreenSock/pen/oNPPmwq Hopefully this helps. Happy Tweening!

Hi, Sorry I have zero experience with Hugo. The only reasons I can think of are The scripts are not loaded in the correct order (do you see any errors in the console?) You are lazy loading your images Somehow Hugo is removing those data attributes (very unlikely) Sorry I can't be of more assistance. Hopefully other users with more experience with Hugo can chime in and share some advice. Happy Tweening!

Hi, Do you have any relevant information on the workflow you have? Like Vue/Nuxt, React/Next, Svelte/SvelteKit, etc. I just whiped some quick React demo here in my local machine and a production build of this codepen example work as expected: https://codepen.io/GreenSock/pen/PoOpobM Happy Tweening!

Hi @jasonbean3000 and welcome to the GreenSock forums! There is not a lot that we can do without a minimal demo. For what I can see in your code there are a few things I can see. You are animating the yPercent of the trigger element, that is not recommendable unless you are completely aware of the effects it will have in the start/end points. Moving the parent element on the Y axis will inevitably affect when the ScrollTrigger animation of the child runs. That's not a GSAP problem, just the way it works in the terms of when a specific point of the trigger element gets to some point in the viewport. On top of that the child seems to be an SVG element, so that element resides inside an SVG canvas that has it's own coordinates system. Finally in your parent ScrollTrigger config you have both scrub and toggleActions. Both are not going to work together, it's either one or the other. In your child timeline you have yoyo but no repeats, yoyo works only when the animation is repeated more than once. Happy Tweening!

Hi, This seems to be a Vue related issue and not GSAP. Clicking those elements has no effect in the DOM. You are changing a reactive property here: choseCategoriesName(category) { // console.log(category); this.choseCategoryName = category.items; }, But that doesn't affect the DOM in any way. You have this on your HTML: <!-- <div class="menu__content content"> <menu-category :getCardsInChoseCategory='choseCategoryName'/> </div> --> But is commented out. Then in the child component you have this method that you want to run on a click, but that click event must happen inside that particular component, not outside. You should check how props are passed down to components and also review conditional rendering in Vue: https://vuejs.org/guide/components/props.html#props-declaration https://vuejs.org/guide/essentials/conditional.html As I said, this is more about Vue than anything else. If you're just starting with it, I'd recommend you to get familiar with the way Vue works and then add GSAP to animate things, otherwise you'll keep running into logic issues like this one. Here are some free resources that can help you: Unfortunately we don't have the time resources to help users with complex setups or non-GSAP related issues. Good luck with your project! Happy Tweening!

Hi, Without a minimal demo, there is not a lot we can do to see what the issue could be. Please do your best to create an example that clearly shows the problem you're having. Just a few elements, no need to paste your entire project. Happy Tweening!

Hi, The problem is that you are pinning the entire container that also wraps the cards, which are also being pinned, so that creates a very erratic behaviour. Since you're not using pin spacing for the cards, just do the same for the title. For the start and end points you can use the offset top property and the previous ScrollTrigger instance's end point (that would be the last card's ScrollTrigger): https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop https://greensock.com/docs/v3/Plugins/ScrollTrigger/previous() Here is a fork of your codepen: https://codepen.io/GreenSock/pen/XWxOwVp Hopefully this helps. Happy Tweening!

Hi, I'm a bit lost here. Everything in the sandbox example is working as expected, maybe I'm missing something? 🤷‍♂️ I even updated the dependencies (you have React 17 and GSAP 3.11.3) and everything works the way is supposed to. Keep in mind that in React child component are rendered first, so by the time the effect hook runs in the parent component, the child component has been rendered already. So technically there is nothing wrong with the approach you have in place. My best guess is that something else in your setup could be causing this problem. Maybe if you want to animate the box and then the texts in the child component, use a timeline for that: gsap.timeline() .to(".box", { rotation: "+=360" }) .to(".secondContainer h1", { autoAlpha: 1, duration: 3, stagger: 0.2, yPercent: 0, }); Hopefully this helps. Happy Tweening!

That's just for the stackblitz template not your setup. There's no other way to use the bonus tools there. In your setup keep using the files you download or the npm token

Hi, If you check the template I linked before: https://stackblitz.com/edit/react-iqmjfx You'll see that the import comes from the GSAP Trial package: import gsap from 'gsap-trial'; import { ScrollTrigger } from 'gsap-trial/ScrollTrigger'; import { SplitText } from 'gsap-trial/SplitText'; Just fork that example and a minimal representation of your setup. Please don't include all your code as it will take longer to find the issue, just the pertinent part of it that's causing the problem you're facing. Happy Tweening!