Leaderboard

Seems like you can't clip-path a video directly, but if you wrap it in an extra div and clip that it does work. I had to move the clip-path to the visible SVG shapes instead of in the refs. But hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/VwVYvJm?editors=1010

Hi and welcome to the GreenSock forums, Thanks so much for the demo. It definitely helped me experiment with a solution. One way of doing this is to have 2 separate ScrollTriggers. One that pins the hero section and another that animates the bars. In order to do this I had to quickly reparent the bars in another div. I also messed around with some of the position values of the bars and durations slightly. https://codepen.io/snorkltv/pen/RwqNVEX?editors=0100 I'm sure it could use some tweaking, but hopefully you see that a big advantage of this setup is that you can adjust the end position of the pinned hero so that it can detach independent of the bars animating and you can play with the values a bit. Also, it will look better when the window is taller. In the vertically challenged embed above the effect gets a bit lost. For this type of effect there is nothing wrong with using different durations for the bar animations. Someday you may want to look into ScrollSmoother which has some very handy parallax capabilities built in. I'm calling this the Double ScrollTrigger Pin and Parallax. It may come to a CreativeCodingClub.com lesson someday soon

Hi there, some notes to help. Handling interaction The best way to handle interaction is by creating ONE timeline or tweens and then controlling it with timeline methods let tl = gsap.timeline({paused: true) tl.to.... // control methods tl.play() tl.reverse() tl.pause() https://codepen.io/GreenSock/pen/eYWGeGe Also I can see you're not using GSAP's context - it's very important to use context in React to clean up your animations, especially with React 18, not using context can lead to some unexpected behaviour/bugs. Check out the article here -

Hey @chrisdb I also had the exact same problem, and I wonder if you have resolved the issue or not because I managed to resolve the issue for my case. I am not too sure but the cause of the ScrollTrigger position shifting around might be due to poor Cumulative Layout Shift on the page (see here Cumulative Layout Shift). What I have done to resolve it was to set width and height for my images, preload my images in the head element of my html file so the images load in advance to reduce the delay and the layout shifting: <link rel="preload" as="image" href="image-url" /> P/S: Really cool website you have there, love the design.

First, most of the time if you want different animations for different screen sizes I would strongly suggest using scrollTrigger.matchMedia() as it allows you to create drastically different animations and layouts. In this case it seems you just need a bit of responsive flexibility. Again, function-based values and invalidating tweens on refresh can help greatly. here is a great explanation of function-based values in tweens: the demo below will the animation will reset itself when you resize so that the red boxes will all be pinned and moved across the screen as you scrub until the blue box comes into view. open in a new window and resize. https://codepen.io/snorkltv/pen/OJaLwgz?editors=0010 ScrollTrigger does a lot of highly optimized, amazing work under the hood so that things like this are seamless and painless. Hope this helps. Carl ps. If you really want to get into the finer points of GSAP and ScrollTrigger you may want to consider my GSAP Course Bundle. Also, if you do need tweens to be constantly changing their target value you may find the ModifiersPlugin of interest too

#designExt { max-width: 100vw; overflow: hidden; height: 100vh; display: flex; flex-wrap: nowrap; position: relative; } Updating the css to this seemed to work for me, unless I'm misunderstanding your question. You shouldn't need to limit the overflow on the body.

Hi, The code you already have in place is quite simple and easy to follow actually, so I don't think it can be better. Maybe use a loop but that could complicate things a bit further. Since you only have 3 sections there is no harm in have a bit of redundancy there, especially with that amount of code. Happy Tweening!

Fantastic... Echt heel erg bedankt @mvaneijgen!

Hi, By default some methods of Tweens/Timelines instances, when pass a position parameter (time/label) suppress events and callbacks by default when moving the instance's playhead around. So when you call play() after the seek event is expected to have those callbacks fired because you create the timeline, then you move the playhead with the seek() method to 3 seconds, then you add the callbacks, after moving the timeline's playhead, and finally you just change the paused state with play(), so at that point the instance will call all the callbacks as you're seeing right now. That's why adding those extra seek() methods before calling play() is working, because you're moving the timeline's playhead around before toggling it's paused state and after adding those callbacks. Those callbacks will be ignored when you toggle the paused state. This also will work the way you intend: tl.addPause(10); tl.seek(3); document.getElementById("#btn-register-cb").addEventListener("click", () => { tl.add(() => { console.log("callback at 1s"); }, 1); tl.add(() => { console.log("callback at 3s"); }, 3); tl.add(() => { console.log("callback at 5s"); }, 5); tl.seek(2.9999); }); document.getElementById("#btn-start-timeline").addEventListener("click", () => { tl.play(3); }); This also will work in the way you're expecting: tl.addPause(10); document.getElementById("#btn-register-cb").addEventListener("click", () => { tl.add(() => { console.log("callback at 1s"); }, 1); tl.add(() => { console.log("callback at 3s"); }, 3); tl.add(() => { console.log("callback at 5s"); }, 5); tl.seek(3); }); document.getElementById("#btn-start-timeline").addEventListener("click", () => { tl.play(); }); Because you're moving the playhead after adding those callbacks, not before, so those callbacks will be ignored. Hopefully this makes sense and helps. Let us know if you have more questions. Happy Tweening!

Hi, Adding to Cassie's great advice, I'd like to know what is not working exactly? If you want to prevent the click handler to run on an element when another is already active, you can just create a boolean and store it in a ref so it's preserved through re-renders. Other than that I don't see anything wrong with your code, besides the fact that you're not using GSAP Context and you're not cleaning up in your effect hook. Happy Tweening!

Hi, Definitely, you can use the disable method in ScrollTrigger: https://greensock.com/docs/v3/Plugins/ScrollTrigger/disable() For timelines yo can use the invalidate method: https://greensock.com/docs/v3/GSAP/Timeline/invalidate() Hopefully this helps. Happy Tweening!

I didn't see any forEach loop in your code. What does not work with a forEach? Seems to work perfectly at my end. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/ZEmYOJq?editors=0011

Do you have a minimal demo of this (a codepen) of what you've tried already?

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: https://codepen.io/GreenSock/pen/aYYOdN If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions.

Hi ! @Rodrigo , Thank you for providing the solution, everything is running smoothly now. 👏

Hi. I ended up with creating a custom router event handler to control transition between pages. Here's the repo: https://github.com/SilviaMalavasi/next-13-page-transition-gsap And here's deployed on Vercel https://next-13-page-transition-gsap.vercel.app/

I've just added a scroll container to the bottom of the html to have enough room to scroll all the way down. <section style="height:500vh"></section> You could set the end trigger to something like end: `bottom-=${theHeightOfYourElements} top`, where you probably want to get the height of the elements dynamically. This will make it that the pin stops working as the height of the elements is the only space left and then they will scroll out of screen normally. Here is a quick example with the height set to 225px and only for the first block. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/Jjeodqw?editors=1010

Hi, The problem here is that your cursor element has a position fixed and everything with position fixed inside a transformed component doesn't behave in the way it normally does: https://stackoverflow.com/questions/15194313/transform3d-not-working-with-position-fixed-children The ScrollSmoother docs mention to move fixed elements outside the smooth wrapper: Caveats position: fixed should be outside the wrapper - since the content has a CSS transform applied, browsers create a new containing block and that means position: fixed elements will be fixed to the content rather than the viewport. That's not a bug - it's just how CSS/browsers work. You can use ScrollTrigger pinning instead or you could put any position: fixed elements OUTSIDE the wrapper/content. Here is a fork of your codepen with the latest syntax as well: https://codepen.io/GreenSock/pen/jOQOgBR This also uses GSAP QuickTo as well: https://greensock.com/docs/v3/GSAP/gsap.quickTo() Hopefully this helps. Happy Tweening!

The radish is a lottie spritesheet, but that could also be achieved with GSAP and a spritesheet tied to scroll Hope this helps. https://codepen.io/GreenSock/pen/mdVEpKK

Sorry to hear about the headaches, @johnrnagle. I'm not aware of any issues like that, but we can't really troubleshoot live sites for free in these forums - there are way too many variables/factors. Plus you'd need to be much more specific about what exactly you mean by "conflicts that lead to unexpected behavior, broken animations, or even site crashes". What unexpected behavior? What exactly breaks about the animations and how can it be reproduced? Same for site crashes. You'll have the best chance of getting a solid answer here if you can provide an isolated minimal demo, like in CodePen or Stackblitz. Or if you'd like to explore paid consulting options, you can contact us directly for that. In terms of conflicts, I would definitely recommend checking to make sure you don't have any CSS transitions/animations applied to the same elements that you're trying to animate with GSAP. And obviously I'd recommend just loading the latest version of GSAP whenever possible.

Hi, I don't see any Flip animation happening in your setup, because right now you're not targeting all the properties that are being updated. Also I spotted a few things that you should consider. Always use GSAP Context when working with React environments. https://greensock.com/docs/v3/GSAP/gsap.context() Always use React's events instead of adding event listeners. It's safer and React will clean those event handlers when/if the component is unmounted. Don't store variables in the global scope of your components, because a re-render will reset those. For a boolean either use state or a ref. Flip.from returns a GSAP Timeline instance so you can store it in a ref. This seems to work the way you expect: export default function App() { const boxRef = useRef(); const flipAnimation = useRef(); const ctx = useRef(gsap.context(() => {})); const clickHandler = () => { ctx.current.add(() => { const state = Flip.getState(boxRef.current, { props: "width,height, background", }); boxRef.current.classList.toggle("enlarge"); flipAnimation.current = Flip.from(state); }); }; useEffect(() => { return () => ctx.current.revert(); }, []); return ( <div className="App"> <div className="composition-component"> <div className="box" ref={boxRef} onClick={clickHandler}> Sky Balls Lopserum Madya </div> <div className="parentBox"> <div className="parentBox1"></div> <div className="parentBox2"></div> </div> </div> </div> ); } Then you can use flipAnimation.current to kill, pause, revert, etc. the timeline returned by the from() method: https://greensock.com/docs/v3/GSAP/Timeline Hopefully this helps. Happy Tweening!

Heya! Maybe you need to wait for your custom font to load? Give this a pop - document.fonts.ready.then(function () { // do the thingsss });

Just my two cents but I find it much easier to use xPercent for these types of repeating scrolling animations. Here's a fork of your demo with that option. https://codepen.io/PointC/pen/vYWQZyX If you want it to reverse, just change the tween to .from xPercent:-100 rather than to. If you want it to yoyo, set yoyo to true. Hopefully this helps. Happy tweening.

Welcome! This forum is being provided as a free service to connect talented GSAP animators with those looking to hire them. Please read this entire post before participating. When Posting a Job: Describe the project's technical requirements and provide links to similar examples and/or storyboards (if available). List the start and end dates of the project (or at least a rough timeline). Provide an estimated compensation range. The more detailed you are in describing your needs, the better your odds of success. If you omit the budget, there's a high risk that qualified candidates will assume it isn’t worth their time. Remember that talented GSAP experts are typically in high demand. We encourage candidates to post public replies to show they're interested, but further coordination should be handled privately either through the forum’s private message system or email. It's probably best not to post your email address in a public forum. Once a candidate is found, please update the post to let others know that the job is no longer available. Freelancers Feel free to post your availability in this forum proactively. Include links to your own website, portfolio, CodePen profile, etc. so that people can get a feel for your style and skill level. It’s a great idea (though not necessary) to post a price range for each example as well. Please represent your skills accurately and include proper attribution for work that’s not yours. One of the keys to a successful working relationship is managing expectations (both sides)! Always under-promise and over-deliver. Pricing a project We generally recommend agreeing to an overall project price and timeline ahead of time rather than billing a flat hourly rate. Some developers work twice as fast as others, so an hourly rate isn’t an accurate gauge of overall cost. But for open-ended projects, we understand that hourly rates might be the best fit. Additional notes We are starting this service on a trial basis. Freelancers are NOT employees of GreenSock. Anyone on the Internet can post here. GreenSock is not liable for anything that happens before, after, or during the life of your project. Please don’t contact us for arbitration help. It’s fine if you want to simply report abuse. If we receive complaints about your conduct (employers or developers), you may be banned from posting here. Again, we make no promises to investigate each and every claim or get into "he said, she said" back-and-forth, so it's in your best interest to keep things positive and exceed expectations. Make us proud. GreenSock does not research or endorse any of the parties posting here. Please let us know if you have any suggestions for making this service even better. Happy tweening!

Canvas Appears Blurry On HiDPI screens, like Retina, 4K/5K, and a lot of phones, the canvas may appear blurry. The TL;DR version of it is that you need to scale the canvas to match to the pixel density. This should appear sharp on a HiDPI screen. This may appear blurry on a HiDPI screen.

Hi @Chris, Like @Carl said, canvas is definitely the way to go for particle animations. If you've never used canvas before, a library like Pixi.js might be the best way to get started. It uses an API similar to Flash, and is focused on moving things around the screen as quickly and efficiently as possible. I converted your demo over to Pixi. I created 15 different particle waves with 1000 particles in each one. When you mouse over the canvas, it will play a different particle wave, that is of course if all 15 aren't playing at the same time. It checks to make sure the timeline for a particle wave is not active before calling restart on it. The particles are being rendered at the speed of light.