Rodrigo

Hi, The issue is that you're using as a trigger a class selector withou scoping it, so basically you're using all the elements with the class ".wrapper": let tl = gsap.timeline({ scrollTrigger: { trigger: ".wrapper", // <- This gets ALL the elements with this class toggleActions: "restart reset restart reset", markers: true } }); Is best to use GSAP Context's scope and/or a ref for each wrapper in order to avoid it. This seems to work the way you intend: const Sectionheader = ({ span, head, id }) => { let spanRef = useRef(null); let headRef = useRef(null); const wrapper = useRef(); useEffect(() => { gsap.registerPlugin(ScrollTrigger); const ctx = gsap.context(() => { let tl = gsap.timeline({ scrollTrigger: { trigger: wrapper.current, toggleActions: "restart reset restart reset", markers: true } }); tl.from(`#span-${id}`, { y: 30, opacity: 0, duration: 1, delay: 0.5, skewX: 3, ease: "power2.easeIn" }).from( `#head-${id}`, { y: 30, opacity: 0, duration: 1, // delay: 0.5, skewX: 3 }, +0.7 ); }, wrapper); return () => ctx.revert(); }, []); return ( <> <section className="wrapper" ref={wrapper}> <p id={`span-${id}`} ref={spanRef}> {span} </p> <h2 id={`head-${id}`} ref={headRef}> {head} </h2> </section> </> ); }; Hopefully this clear things up and thanks for the super simple demo, super easy to solve issues like this! 🥳 Happy Tweening!

Hi @Onadras and welcome to the GreenSock forums! I think the best course of action in this case is to remove ScrollTrigger and focus just on the animations. ScrollTrigger is just a way to control the progress of a GSAP instance based on the scroll position, nothing more. Is best to get the animation working in the way you expect and then add ScrollTrigger to the mix. Also be careful with this numbers you're using on the duration and delay configuration: imgTopTimeline.to(".imgtop", {y: "-800px", ease: "power1.inOut", delay: 800, duration: 200}); imgBottomTimeline.to(".imgbottom", {y: "800px", ease: "slow", delay: 1000, duration: 200}); imgContent1Timeline.to(".imgcontent1", {y: "-200px", ease: "slow", delay: 1000, duration: 50}); GSAP works in seconds not milliseconds, so a 200 seconds duration is over 3 minutes (3 minutes and 20 seconds to be specific). While a 1000 seconds delay is more than 16 minutes of delay, that's a looong wait: Another thing is that you're using a bunch of timelines for a single sequence where the same element should be pinned during the entire animation, so why not use a single timeline for the entire thing. I forked your codepen and created a single timeline with all the animations: https://codepen.io/GreenSock/pen/mdGpraO Now that we have a timeline that animates everything the way we intend, we add ScrollTrigger to the mix now: https://codepen.io/GreenSock/pen/zYJpKgg Finally I recommend you to review this video in order to understand the process I did in order to arrive to the final codepen: Hopefully this clear things up. Happy Tweening!

Hi, I created a simple repo that includes the .npmrc file in the .gitignore list and I can't reproduce the issue you're reporting: https://github.com/rhernandog/npmrc-test Here is the .gitignore file: https://github.com/rhernandog/npmrc-test/blob/master/.gitignore#L25 And you can see that in the package.json file I installed the shockingly green package: https://github.com/rhernandog/npmrc-test/blob/master/package.json#L12 Which is being used here: https://github.com/rhernandog/npmrc-test/blob/master/src/App.vue#L10-L20 It would be great if you could provide more information in order to see what could be the issue. Happy Tweening!

Hi, You should take a look at ScrollTrigger's Container Animation, here is an example: https://codepen.io/GreenSock/pen/WNjaxKp Hopefully this helps. Happy Tweening!

Hi, Is really hard for us to find issues without a minimal demo. You can fork our React Starter template directly on this link: https://stackblitz.com/edit/react-cxv92j Or you can find our most popular templates in Stackblitz Creative templates: https://stackblitz.com/?starters=creative Based on the images you shared the only issue I can see is that you're not using GSAP Context. When it comes to using GSAP in a React environment Context is your best friend! https://greensock.com/docs/v3/GSAP/gsap.context() Also I recommend you to check the articles in this section of our website: Hopefully this helps. Happy Tweening!

Can't wait to see you around the forums helping users, which not only feels great but is the best way to learn GSAP actually. My journey started over 11 years ago in the same way and one day after a few months I was a moderator here in the forums. Many of us have followed a similar path and inspired others to do the same, I sure hope that you can join those ranks one day: Happy Tweening!

Hi, There's an error with the image so I can't see it 🤷‍♂️ I've created repos with the the .npmrc file in the gitignore file and I can't recall having any issues when pushing changes to the remote. Maybe this could be more related to a got thing than anything else. Unfortunately git is not something I know a lot. Maybe @Prasanna could have some ideas to get around this. Is almost 1 AM here so tomorrow morning I'll jump right into creating some repos in GitHub with the .npmrc file in the gitignore file and see what happens and report back. Sorry I can't be of more assistance about this 😞 Happy Tweening!

Hi, Sorry about that, but this is more related to the page transition than anything else. I don't know how you're creating the page transition but that is not a GSAP related issue. In this particular case the URL is changing and the entire page is completely loading from scratch so maybe that's why you're seeing that flash you're reporting, I'm assuming that this is what you're referring to: https://www.loom.com/share/eb8a4c3843824bbe8e769047b5af69dd Unfortunately beyond the codepen example there is not much more we can do about this. Hopefully another user with more webflow experience could chime in and give you some pointers. Also you should ask to webflow support about page transitions and using GSAP with them. Sorry I can't be of more assistance. Happy Tweening!

It shouldn't really matter, just create a codepen example that has those DOM elements and just run that particular section of the code on page load. As I mentioned before the URL doesn't matter, just run that part in a load event: window.addEventListener("load", function(event) { init(); }); function init () { var pagetran = gsap.timeline(); pagetran .set(".my-picture", {autoAlpha: 1}, 0) .to(".my-picture", {opacity: 0, z:-100, duration: 0.4, ease: "power2.out"}); } This is a simple example using just that part of the code you're posting and as you can see it works as expected: https://codepen.io/GreenSock/pen/QWVOJdy Hopefully this helps. Happy Tweening!

Hi, I'm not sure I totally follow your issue, but maybe the issue is in the value you're passing to the position parameter here: .to(".my-picture", {opacity: 0, z:-100, duration: 0.4, ease: "power2.out"}, "<-1.2") Basically you're telling GSAP to add this instance minus 1.2 seconds before the previous instance's start time. If the previous instance is at zero seconds, then a negative time is send back from the end of the timeline. So for example if your timeline has a duration of 5 seconds and you pass a minus 1.2 seconds to the first instance or any other using the position parameter that tells GSAP to add that animation 1.2 seconds before the first instance, GSAP adds that instance 1.2 seconds before the end of the timeline, that's it at 3.8 seconds. In this case if the previous instance is a set() instance it lasts 0 seconds, so there is no need to add that position parameter in the next animation. If this is not the case of your setup, please create a minimal demo that illustrates this particular issue. Of course the URL stuff is not needed, just the code you're trying to run in that particular conditional block. Hopefully this helps. Happy Tweening!

Hi, The problem is that the useEffect hook is running immediately when the page component is mounted and the calculations by ScrollTrigger were made when the page was still animating in the page transition, so GSAP was obediently using those. The solution is to wait for the completed state of the transition context instance. useIsomorphicLayoutEffect(() => { if (!completed) return; const ctx = gsap.context(() => { const sections = gsap.utils.toArray(".panel"); const tl = gsap.timeline({ scrollTrigger: { trigger: ".horizontal-wrapper", pin: true, markers: true, start: "top top", end: "+=500%", scrub: true, } }) .to(sections, { xPercent: -100 * (sections.length - 1), ease: "none" }); }, main); return () => ctx.revert(); }, [completed]); I updated the Github repo so it reflects the update, the live preview is updated and working as well. Repo https://github.com/rhernandog/next-pagetransitions-horizontal-scrolltrigger Live Deploy https://enchanting-kheer-2aaf00.netlify.app/ Hopefully this helps. Happy Tweening!

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!