Rodrigo

Hi, Honestly I don't know what to tell you. The code for the restart method pauses the video you pass as a parameter and then sets it's current time to zero, so it acts like the video will start from the beginning again the next time. Make sure to check your console and the method you're using for restarting the video, that again, is not really a restart just a pause and setting the current time value, just that. Happy Tweening!

Hi, Maybe you're looking for something like these examples? https://codepen.io/GreenSock/pen/mdKWBmm https://codepen.io/GreenSock/pen/LYJavxr https://codepen.io/GreenSock/pen/eYLdzrR Hopefully this helps. Happy Tweening!

Hi Keaton, Horizontal pinning, as you might already found out, is not something that comes out of the box in ScrollTrigger for a few reasons that I won't go into detail here. Container animation also can't accommodate inning as well. What you already have in place seems to be quite closer to what you're trying to do. Using a timeline to move the slides or the horizontal container, add instances in the timeline to move other things and the continue moving the horizontal container. If you want to achieve what @akapowl had in this particular example: https://codepen.io/akapowl/pen/BaYKMrB It might come down to CSS mostly. The brilliance in Paul's example is here: gsap.set('.red', { zIndex: 999 }) const fakePin = gsap.to('.red h1', { x: window.innerWidth * (sections.length - 2), ease: 'none' }) ScrollTrigger.create({ trigger: ".red", containerAnimation: scrollTween, start: 'left left', end: "+=" + window.innerWidth * (sections.length - 2), scrub: true, animation: fakePin, }) First He gives the red section (that has the h1 inside) a super high z-index so it's above all the other sections. Then every panel has a relative position and the h1 that is "pinned" has an absolute position. Since it parent has a position as well, the absolute position is based on it's parent and not the document. Then the fakePin animation just animates the h1 to the right/left as you scroll down/up. You can see that the amount for x in the fakePin animation is the same as the end point in the ScrollTrigger instance. I strongly recommend you to play with Paul's example, study it and try to start with your own version in the simplest possible way. Don't run a bunch of loops for a bunch of sections. Just start with one and once you have a bullet proof animation that works the way you intend, take it from there and use it in more sections. We can help you solving simple issues, but use simpler and smaller examples than the one you have right now, and then you can take it up one step at a time. Hopefully this helps. Happy Tweening!

Hi, That might not be the simplest thing to achieve since you have to make the 3D animation, give the correct perspective on the parent, etc. If I was you, I'd start by creating a simple content slider in React, once you have a bullet-proof concept that works as you expect, start adding the styles and 3D stuff. I strongly recommend you to check the resources in this page: For a content slider a good starting point should be this codepen by @PointC https://codepen.io/PointC/pen/YRzRyM Hopefully this helps you getting started. Good luck with your project! Happy Tweening!

Hi, I read your questions a few times and looked at the code you have and I'm not sure I follow what you're trying to do. Do you have a example of a website or app that works in the way you intend? You mention that section 1 disappears and also section 2, but I can see both of them scroll normally. The code you have in place is doing exactly what's supposed to do 🤷‍♂️ Happy Tweening!

Hi, Do you have an environment variable in your setup that matches the configuration in your .npmrc file? always-auth=true registry=https://npm.greensock.com @gsap:registry=https://npm.greensock.com //npm.greensock.com/:_authToken=${NPM_TOKEN} Also you might want to check this article: https://blog.privjs.com/article/how-to-install-club-greensock-packages-on-digitalocean-aws-etc Hopefully this helps. Happy Tweening!

Hi, Sorry to hear about the issues. I checked your demo and there are a few issues. First you have fromTo instances with just one configuration object, you need two, hence from-to: gsap.fromTo(target, { // From Config Object }, { // To Config Object }) Then you have two target strings: gsap.fromTo("target1", "target2", {/*Config Object*/}) In that code GSAP is looking at target2 as the first config object and gets a string, you need to put those in an array. Finally you're using back.inOut in your easing function that will create that jump at the start. Here is a fork of your codepen with just a to() instance, the targets in an array and the default easing function: https://codepen.io/GreenSock/pen/xxyyVdm Hopefully this helps. Happy Tweening!

Hi @alpine and welcome to the GreenSock forums! First thanks for being a Club GreenSock member and supporting GreenSock! 💚 Sorry about the issues. What service you're trying to deploy to (Netlify, Vercel, AWS, Digital Ocean, etc.) and what particular framework are you using (React, Vue, Next, Nuxt, SvelteKit, etc.)? We need a bit more information to know what could be the issue. I just ran a couple of deploys of a Next app in Vercel and Netlify without any errors. Here is the repo just in case: https://github.com/rhernandog/next-gsap-bonus-yarn Happy Tweening!

What you need is the position parameter: gsap .timeline({ scrollTrigger: { trigger: "#intro", markers: true, start: "50% 30%", end: "+=100%", pin: true, scrub: 1 } }) .to(".logo", { x: -300, opacity: 0 }) .to(".copybox", { x: 0, opacity: 1 }, "-=0.25") // Start 0.25 before the previous instance ends .to({}, {}); Happy Tweening!

Yikes!!! that's over 700 lines of code! Any chance to reduce it even further? Where should we look for problems in that codebase? For performance maybe try will-change: transform in the image elements. Maybe try canvas or WebGL like PIXI or THREE. To disable Draggable just on desktop. IDK, there are always complicated ways to check for that (you already have a large regex for checking mobile devices) but I always try to simplify it to screen size and if the device has touch events in it. Sure some desktops have touch events but large screen sizes. Do you have an even more minimal demo for this? Again IDK where should I look for that and we don't have the time resources to comb through 700 lines of code in order to find that particular feature. Happy Tweening!

Hi @Samuel21dev and welcome to the GreenSock forums! I inspected that and it seems that is adding a video inside the element being hovered. As for the wavy stuff... yeah I have no idea, the only thing that comes to mind is WebGL and Shaders. Unfortunately this is beyond the scope of these free forums since we try to keep everything in here GSAP related. I'll look into shaders (not the easiest thing I should add) and see what can be done. Another option could be SVG masking and the MorphSVG Plugin, but I don't know about possible performance issues. You could play with it and see how it works: https://greensock.com/docs/v3/Plugins/MorphSVGPlugin Good Luck with your project! Happy Tweening!

Hi Ian and welcome back to GSAP Land!! I think the best approach is a single timeline for controlling everything: gsap .timeline({ scrollTrigger: { trigger: "#intro", markers: true, start: "50% 30%", end: "+=100%", pin: true, scrub: 1 } }) .to(".logo", { x: -300, opacity: 0 }) .to(".copybox", { x: 0, opacity: 1 }) .to({}, {}); That extra empty to() instance at the end will keep the grey box for a bit on the screen after the animation is completed. Here is a fork of your demo: https://codepen.io/GreenSock/pen/vYVzzQM Hopefully this helps. Happy Tweening!

Hi, As much as we love helping users We have limited time resources in the forums, so we can't tackle lists of requests for our users. You might want to have a look at this: https://codepen.io/GreenSock/pen/Pqwxvw As for your questions: This will depend if you want to duplicate them or re-parent them. In both cases I'd use state management to keep elements in one or two lists and render the DOM accordingly using a v-for directive. You can check the event type in the onClick callback and if it is the secondary mouse button stop your code or use the allow the context menu config option from the Draggable Docs: allowContextMenu Boolean - If true, Draggable will allow context menus (like if a user right-clicks or long-touches). Normally this is suppressed because it can get in the way of dragging (especially on touch devices). Default: false. I have no idea how that particular library works. I guess you could use them in different components but I'd test before using both on prduction. Happy Tweening!

Hi, The link you provide seems to be broken and you also posted in the Jobs & Freelance forums. Are you looking for paid consulting for this particular project? Happy Tweening!

Hi, You might want to check this particular thread: It's just about creating a single timeline to control everything and use the position parameter for the texts animations. Hopefully this is enough to get you started. Happy Tweening!

Hi, Any particular reason to use GSAP 2.x and ScrollMagic. GSAP now has the ScrollTrigger Plugin and we're currently on version 3. I recommend you to check the docs: Also go through this video: Finally check the ScrollTrigger demos page: https://greensock.com/st-demos/ And these collections: https://codepen.io/collection/AEbkkJ https://codepen.io/collection/DkvGzg Hopefully this is enough to get you started. Happy Tweening!

Hi, An answer has been provided in this thread: Happy Tweening!

Hi, Please do not create duplicate posts. We do our best to answer as soon as we we can. Unfortunately it might take more time than expected to actually give a user an answer, but an answer will be given, so please be patient. First you have an error in your code. The HTMLMediaElement API doesn't have a restart method, just play and pause: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement Also on your example your second video was not wrapped in a div with the class "vid" so this returned an array with just one element: let allVideoDivs = gsap.utils.toArray(".vid"); Maybe you're looking for something like this: const allVideoDivs = gsap.utils.toArray(".vid"); const restartVideo = (video) => { video.pause(); video.currentTime = 0; } allVideoDivs.forEach((videoDiv, i) => { let videoElem = videoDiv.querySelector("video"); ScrollTrigger.create({ trigger: videoElem, start: "bottom bottom", end: "bottom top", markers: true, onEnter: () => videoElem.play(), onEnterBack: () => videoElem.play(), onLeave: () => restartVideo(videoElem), onLeaveBack: () => restartVideo(videoElem), }); }); Here is a fork of your demo: https://codepen.io/GreenSock/pen/YzJOOZO Hopefully this helps. Happy Tweening!

Hi, Your making the wrong calculation for the horizontal movement of the container, I guess you meant this: window.innerWidth - slidesSection.clientWidth Then you don't need gap between the blocks just scale them down in order to create the separation. Finally in this case you can use an onUpdate callback and a delayedCall: const slidesSection = document.querySelector(".container"); const slidesContainer = document.querySelector(".scrolling"); const blocks = gsap.utils.toArray(".block"); let timer; gsap.to(".container", { scrollTrigger: { trigger: slidesContainer, scrub: true, pin: slidesContainer, start: "top+=1 top", end: "+=100%", markers: true, invalidateOnRefresh: true, onUpdate: (self) => { timer && timer.kill(); gsap.to(blocks, { scale: 0.9, transformOrigin: "center center", duration: 0.3, ease: "none" }); timer = gsap.delayedCall(0.3, () => { gsap.to(blocks, { scale: 1, transformOrigin: "center center", duration: 0.3, ease: "none" }); }); } }, x: () => window.innerWidth - slidesSection.clientWidth, ease: "none" }); Here is a fork of your demo: https://codepen.io/GreenSock/pen/zYmJJrZ Hopefully this helps. Happy Tweening!

Hi @RDC and welcome to the GreenSock forums! First, thanks for being a Club GreenSock member and supporting GreenSock! 💚 The only thing I can think of is that somehow the ScrollSmoother instances are not really being removed, that somehow you have two, three and so forth. I don't have time to dig into SWUP's API and look for some lifecycle methods and create an example of my own and test. Have you ran some console calls in your files that create the ScrollSmoother instances for each page? Are you 100% sure that the entire HTML is being removed? Or is just being replaced by SWUP? The only advice I can give you now is that on every page, wrap everything that is GSAP related in a GSAP Context instance: https://greensock.com/docs/v3/GSAP/gsap.context() If that's not possible at least wrap the ScrollSmoother instance and before the page gets removed run the revert() method on that GSAP Context instance: const ctx = gsap.context(() => { const smoother = ScrollSmoother.create({ // config here }); }); // Later when the page gets removed ctx.revert(); But as far as I know nothing should trigger this behaviour unless you're updating the speed parameter in the ScrollSmoother configuration. I just ran some tests running ScrollSmoother create up to five times on the same page in a span of 5 seconds while killing the previously created ScrollSmoother instance and I can't replicate the problem. let smoother = ScrollSmoother.create({ smooth: 1, effects: true, }); let iterations = 0; const timer = setInterval(() => { smoother.kill(); smoother = ScrollSmoother.create({ smooth: 1, effects: true, }); iterations++; if (iterations > 4) { clearInterval(timer); } }, 1000); Have you tested withou SWUP? Are you using the latest version of ScrollSmoother? Hopefully this helps. Happy Tweening!

Hi @durratino and welcome to the GreenSock forums! Is really hard for us to debug without a minimal demo. If you're getting an error that clearScrollMemory is not a function, be sure to have latest version of ScrollTrigger and that you don't have a typo in your code: ScrollTrigger.clearScrollMemory( scrollRestoration:String ) ; As far as I know display none elements are taken out of the document, hence that will throw off ScrollTrigger calculations. Maybe you could use a combination of Flip and ScrollTrigger for this: https://codepen.io/GreenSock/pen/NWRxarv But again, without a minimal demo, there is not a lot we can do. Happy Tweening!

Hi, Performance is a really deep topic and could depend on far too many things. On top of that framework specific optimizations will also depend on what you're trying to do and the way said particular framework works. If you're just getting started with React and GSAP I'd strongly recommend you to go through the resources in this page: As for selectors, is better to use GSAP Context (as shown in those articles) and take advantage of the scoping parameter you can pass to the Context callback. That will tell GSAP to look for elements with the selector text you pass within that element and not the entire document, which of course will have a positive impact overall. If that impact will be noticeable or not, again, it will depend on many factors. If you have any other question remember to include a minimal demo. Here are our starter template collections for React and Next: https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters https://stackblitz.com/@GreenSockLearning/collections/gsap-nextjs-starters Hopefully this helps. Happy Tweening!

Hi, Is really hard for us to debug a live site. Please create a minimal demo showing the problem you have. I inspected your site quickly and saw that you're animating the padding top and font-size properties of that particular element which changes it's height. That also resides in an element that you are pinning as well. That could be the issue here. It's always recommended to not animate paddings because of performance and anything that changes the height of the element as it's becoming pinned could affect the calculations ScrollTrigger does. But as I mentioned, without a minimal demo, there is not much we can do. Happy Tweening!

Hi, I'm not sure I completely understand what you mean. You want faster scrolling or faster animations as you scroll? For faster animations you can reduce the amount of pixels your ScrollTrigger instances last. For faster scroll using ScrollSmoother you can use the speed configuration option: speed Number - a multiplier for overall scroll speed, so 2 would make it scroll twice the normal speed, and 0.5 would make it scroll at half-speed. added in version 3.11.4. ScrollSmoother.create({ smooth: 1.6, effects: true, speed: 1.5,// 50% faster than normal }); Hopefully this helps. If you keep having issues, please create a minimal demo so we can take a better look and be as explicit as you can about what you're trying to do. Happy Tweening!

Hi, I'm not completely sure that I follow what's the issue you're having, but you could add this to your onDragEnd callback: console.log(this.target.getAttribute("id")); console.log(this.target.classList); That should give you the id and the classes the element has. On top of that you're using GSAP/Draggable 2. I strongly suggest you to use the latest version in order to take advantage of the latest API and all the fixes and improvements that have been added since V2.x: https://greensock.com/docs/v3/Plugins/Draggable One thing that should be super useful in this particular scenario is the hitTest() method: https://greensock.com/docs/v3/Plugins/Draggable/static.hitTest() Hopefully this helps. Happy Tweening!