Rodrigo

Mhhh.... yep I see the issue now. I'll work on it and try to figure out what's up. Please stand by 🙏

Hi @IvanSmiths and welcome to the GreenSock forums! You can create an example using one of the starting templates we have in our NextJS collection https://stackblitz.com/@GreenSockLearning/collections/gsap-nextjs-starters This one is specific for using ScrollTrigger https://stackblitz.com/edit/nextjs-5cm4qn Please use either the last one or a new NextJS project for creating a minimal demo. Happy Tweening!

Hi, I created an example for sharing a Timeline between components using Redux Toolkit: https://stackblitz.com/edit/vitejs-vite-bkoybk?file=src%2FApp.jsx&terminal=dev I didn't ran into any recursive errors, I do get an error about a non-serializable value being passed around. I tried to add the specific action to the ignoredActions array using Redux Middleware but it didn't work 🤷‍♂️. Maybe I'm missing something here. IMHO this is extremely convoluted for sharing a reference to a GSAP Instance, I'd use React Context and even further I'd use Vue or Svelte. I know by experience that using Vue with either VueX or Pinia in this scenario is far simpler than this, but I understand that sometimes the tools being used in an app are not the call of a single developer. Hopefully this helps. Happy Tweening!

Hi, There are no SVG elements in your code so this I can't understand correctly: The solutions provided by @Toso and Jack should be enough for the codepen example you have. As mentioned before there is no need for the Attribute Plugin if you want to animate the background color of a DIV or any other regular DOM element, just follow the code that has already been provided and you should be fine. Unless your real life scenario does include SVG elements, but you're not including them in the codepen examples you're providing, so we're running in circles here. Happy Tweening!

Hi, Fill is not a CSS property of regular DOM elements and, as stated in the documentation, the Attribute Plugin is not meant for DOM elements when you animate CSS properties, that's what the CSS Plugin is for. Please create a minimal demo that shows exactly what you're trying to do. Happy Tweening!

Hi @enut, Do you have a minimal demo that shows what's going on here: Unfortunately the codepen you already provided and the solution by Mitchel, don't include a menu of any type so we can't tell what's going on based solely on this description 🤷‍♂️ Happy Tweening!

Hi, For SVG is best to use the Attribute Plugin: https://greensock.com/docs/v3/GSAP/CorePlugins/AttrPlugin So in this case it would be: gsap.to(['#box1', '#box2'], { attr: { fill: "#F2653A" }, duration: 1 }); Where box1 and box2 are SVG elements. Hopefully this helps. Happy Tweening!

Hi, Unfortunately we don't have an ETA for the next release, so you can use the link Jack provided until 3.11.5 is released. If you need the NPM files let us know. Happy Tweennig!

Hi @demiava, This should provide a good starting point: https://codepen.io/GreenSock/pen/MWXPgKm If you have more questions, please remember to include a minimal demo. Happy Tweening!

Hi, I think this is more related to your CSS and the fact that you're not removing the transforms applied by GSAP on the page transition (as mentioned in the thread I linked above) than anything else. I forked our own example and created a horizontal section that's pinned: https://stackblitz.com/edit/nextjs-56kiof?file=pages%2Fspecialties.js Is worth noticing that this is not working as expected in Stackblitz. We'll check with them and see what could be the issue, my best guess is that it has something to do with Webcontainer (something they use to build a node environment on the browser). So I created a repo and deployed the site in Netlify and seems to work: https://github.com/rhernandog/next-pagetransitions-horizontal-scrolltrigger https://enchanting-kheer-2aaf00.netlify.app/ As I mentioned be sure to remove the styles applied in the transition by GSAP: https://github.com/rhernandog/next-pagetransitions-horizontal-scrolltrigger/blob/horizontal-issue/components/Transition.js#L22-L25 Hopefully this helps. Happy Tweening!

Hi, A few things about your example: You have two end points in your ScrollTrigger configuration: scrollTrigger: { trigger: parentContainer.current, start: "top top", end: "bottom bottom", pin: true, scrub: 1, snap: 1 / (sections.length - 1), // Duplicated end position end: () => "+=" + parentContainer.current.offsetWidth, invalidateOnRefresh: true, } Just use one of course. You are using both the native match media object and ScrollTrigger's match media inside the native one. I've never seen anything like that but most likely that would cause some troubles. You should use just GSAP MatchMedia since it's a wrapper for GSAP Context which makes using it in React super easy and offers the same goodies Context does plus responsive code. I forked your example using just GSAP MatchMedia and it seems to work as expected: https://stackblitz.com/edit/vitejs-vite-vxddh9?file=src%2FApp.jsx&terminal=dev Here you can read more about GSAP MatchMedia: https://greensock.com/docs/v3/GSAP/gsap.matchMedia() Hopefully this helps. Happy Tweening!

Hi, I don't think I follow what you mean with the layered pinning, also why are you removing the pin space, that kind of defeats the purpose especially if one section comes right after the other. I added an extra section after each pinned section and I'm not seeing any extra space: https://codepen.io/GreenSock/pen/eYLGgBy Most likely this is related to your HTML/CSS, but without a minimal demo there is not much we can do, so please try to create one that shows the issue you're having. Happy Tweening!

Hi, I think you're overcomplicating this a bit. It would be simpler to create create the sections and just run a series of loops on each in order to create the animation for each one. Here is a simplified approach of how I'd do it: https://codepen.io/GreenSock/pen/eYLGgBy Hopefully this helps. Happy Tweening!

Hi, I read your post a few times and I'm not completely clear about what you're trying to do, so I took a guess and came up with this: https://codepen.io/GreenSock/pen/QWVqGmw Basically I'm using the Flip Plugin to set the position of the elements and then animate them back to their normal position. Once that is completed I toggle a boolean to allow the mouse enter/leave events and apply a scale animation. Hopefully this helps. If is not what you're after, please be as specific as you can about what you're trying to do. Happy Tweening!

Hi @Ishan Shishodiya, It seems that you also created a new thread for this: Do you mind if we keep the discussion in that thread 👆 instead of extending this one? Since you're using redux the scenario is different than the one in this thread, so it'd be better to focus our attention in your other thread 👍 Happy Tweening!

Hi @Nicolas Corso, I created a simple example using ScrollTrigger with Gatsby, that doesn't use images and even uses the gsap-trial package to morph an SVG and the MotionPath plugin with Gatsby's Link component for the routes, here: https://github.com/rhernandog/gatsby-scrolltrigger Please take a look at it and see if you can adapt that to your scenario. If you keep having any issues please provide a link to a minimal repo that shows the issue you're having, not your complete project. Hopefully this helps. Happy Tweening!

Hi, This seems related to this other thread: Please let us know if you want to keep track of this thread or the other I just linked above, so we can focus our attention in just one of them. Feel free to edit either one to include both demos on them. Happy Tweening!

Hi, Definitely! GSAP can handle SVG without any problem (assuming that you'll export your setup as SVG vectors so they can be animated with GSAP), then you can get your data from anywhere you want as JSON for example and use it to create your animation or add/remove dots to your map. How do you get your data is quite irrelevant to be honest, just get the data from any server and tell GSAP what to do in terms of your animation. Hopefully this helps. If you have more doubts, please create a minimal demo that we can take a look at in order to give you the best possible support. Happy Tweening!

Hi @h-amad, The issue is that display is not a property that can be animated. What you could try is having both items in the same container with absolute positioning and just do a fade in/out or a clip path animation as well. That's the approach I'd follow in this case. Here is a super simple example (sorry I don't have time to convert all the CSS in your codepen to make it work, but hopefully you'll get the idea): https://codepen.io/GreenSock/pen/WNgEzBM Hopefully this helps. Happy Tweening!

Hi @iamterryclark and welcome to the GreenSock forums! Sorry about the delay 🙏 Draggable has an update method, but I don't know how helpful that would be given the fact that you're using a Proxy for dragging. I believe in this case it would be better to use a combination of ScrollTrigger and the Observer Plugin as shown in this example, that should be enough for the responsive approach and you wouldn't have to trouble with updating the Draggable instance: https://codepen.io/GreenSock/pen/oNdNLxL Also I notice that you're not using GSAP Context in your setup. When using GSAP in a React/Next/Gatsby project GSAP Context is your best friend! https://greensock.com/docs/v3/GSAP/gsap.context() I'd strongly recommend you to check these resources: Finally regarding your snapping in the example you provided, right now you're using the number of panels and not the width of each panel. If you check the API for snapping you'll see that the value of snapping varies between 0 and 1, which is basically a percentage-based value of the instance. So you could check the width of each image, get the percentage of that image relative to the total width and feed an array that has all those values to the snap function. Another option is add a label for each image in the timeline and use either labels or labelsDirectional. From the docs: Number | Array | Function | Object | "labels" | "labelsDirectional" - Allows you to snap to certain progress values (between 0 and 1) after the user stops scrolling. So snap: 0.1 would snap in increments of 0.1 (10%, 20%, 30%, etc.). snap: [0, 0.1, 0.5, 0.8, 1] would only let it come to rest on one of those specific progress values. It can be any of the following: Number - snap: 0.1 snaps in increments of 0.1 (10%, 20%, 30%, etc.). If you have a certain number of sections, simply do 1 / (sections - 1). Array - snap: [0, 0.1, 0.5, 0.8, 1] snaps to the closest progress value in the Array in the direction of the last scroll (unless you set directional: false). Function - snap: (value) => Math.round(value / 0.2) * 0.2 feeds the natural destination value (based on velocity) into the function and uses whatever is returned as the final progress value (in this case increments of 0.2), so you can run whatever logic you want. These values should always be between 0 and 1 indicating the progress of the animation, so 0.5 would be in the middle. "labels" - snap: "labels" snaps to the closest label in the timeline (animation must be a timeline with labels, of course) "labelsDirectional" - snap: "labelsDirectional" snaps to the closest label in the timeline that's in the direction of the most recent scroll. So if you scroll a little bit toward the next label (and stop), even if the current scroll position is technically closest to the current/last label, it'll snap to the next one in that direction instead. This can make it feel more intuitive for users. Object - Like snap: {snapTo: "labels", duration: 0.3, delay: 0.1, ease: "power1.inOut"}, fully customizable with any of the following properties (only "snapTo" is required): snapTo [Number | Array | Function | "labels"] - determines the snapping logic (described above) delay [Number] - the delay (in seconds) between the last scroll event and the start of the snapping animation. Default is half the scrub amount (or 0.1 if scrub isn't a number) directional [Boolean] - by default (as of version 3.8.0), snapping is directional by default meaning it'll go in the direction the user last scrolled, but you can disable this by setting directional: false. duration [Number | Object] - the duration of the snapping animation (in seconds). duration: 0.3 would always take 0.3 seconds, but you can also define a range as an object like duration: {min: 0.2, max: 3} to clamp it within the provided range, based on the velocity. That way, if the user stops scrolling close to a snapping point, it'd take less time to snap than if the natural stopping point is far from a snapping point. ease [String | Function] - the ease that the snapping animation should use. The default is "power3". inertia [Boolean] - to tell ScrollTrigger not to factor in the inertia, set inertia: false onStart [Function] - a function that should be called when snapping starts onInterrupt [Function] - a function that should be called when snapping gets interrupted (like if the user starts scrolling mid-snap) onComplete [Function] - a function that should be called when snapping completes Hopefully this helps. Happy Tweening!

Hi @blindbeat and welcome to the GreenSock forums! It's really hard for us to spot any issues without a minimal demo. The only idea I can offer you is using function based values or create your GSAP instances on the fly based on events (like click or other event, if that's a possibility). For using function based values the function will receive three parameters depending if the element is a single element or an array/node-collection: gsap.to(".class", { x: 100, //normal value y: function(index, target, targets) { //function-based value return index * 50; }, duration: 1 }); Hopefully this helps and clear things up. If you keep having issues remember to include a minimal demo. Happy Tweening!

Hi @Nicolas Corso, I'll dig into this tomorrow here on my local machine and see if I can come up with something that helps in this case. You mention that you don't have images in the page that is giving you troubles, so my only question at this point would be to ask if you've used useEffect or useLayoutEffect (for the case of this being SSR you can use the useIsomorphicLayout approach mentioned here). Also have you tried with a setTimeout with 0 ms or very little time, like 10~50 milliseconds? Does your SVG has a lot of filters or anything that would delay the rendering process (I've seen that affect the loading process and create layout shifting in Next at least)? Hopefully this helps and sorry for not being of more assitance. Happy Tweening!

Not really, is just one of the ways to add some extra time at a specific point of a Timeline. You can add a label x seconds after the last instance or use a call method to call a function that does nothing or add a dummy tween. I fyou get creative you can definitely come up with more ways, but the main objective is, in this particular case, to extend the duration of the timeline to give extra scrolling space after the rotation animation is completed. Hopefully this clear things up. Happy Tweening!

Hi @Bahaa and welcome to the GreenSock forums! Maybe you're looking for something like this: https://codepen.io/GreenSock/pen/jOvLBRg Hopefully this helps. Happy Tweening!

Hi, The issue is that you're adding the click handler to the menu button every time the code runs inside the GSAP MatchMedia instance. So every time you pass that particular breakpoint, the click handler is added again so you end up with multiple calls on a single click event. This seems to resolve that: mm.add("(max-width: 860px)", () => { /* Activate menu */ const mobileTl = gsap.timeline().reverse(); mobileTl /*...*/ const menuClickHandler = () => { menuOpen ? mobileTl.timeScale(4).reversed(menuOpen) : mobileTl.timeScale(1).reversed(menuOpen); menuOpen = !menuOpen; document.body.classList.toggle("lock-scroll"); navBar.classList.toggle("unlock-scroll"); }; // Add click handler menuBtn.addEventListener("click", menuClickHandler); mobileTl.pause(0).reverse(); return () => { mobileTl.pause(0).reverse(); menuOpen = false; document.body.classList.remove("lock-scroll"); navBar.classList.remove("unlock-scroll"); // Remove click handler menuBtn.removeEventListener("click", menuClickHandler); }; }); Hopefully this helps. Happy Tweening!