Leaderboard

Stop optimising your code before it is even working! I have to preface this with I do this all the time, but knowing helps me get out of this thought process. I see so many questions on this forum “how do I do this in a for loop, but then not for the third item in the loop…”, you're making it way to complex. I know we all have learned Don’t Repeat Yourself (DRY), but there is nothing wrong with a little repeating if you know you're going to optimise it later. When I feel I’m banging my head against the wall and can’t see how the get something to loop the way I want, I take a step back and just manually write it out by hand. Literally writing out what each element should do, this of course can be insane if you need to have more then a hundred elements to do something, but then I just pick the first few, eg .item:nth-child(1), .item:nth-child(2), … .item:nth-child(5),ect. If you do this a few times you’ll probably see a pattern emerging, but try to resist the urge to start optimising, just keep writing out the animation until you have a solid base that represents the animation you want to have. That is why I love working in Codepen, first I don't have to worry about my real projects dependancies, or my framework throwing weird errors, I can just worry about the demo I’m building and making it the best I can and when I think I’m ready for the next step I fork my pen and start moving the code around. Get some of the repeating code and try adding it to a for loop, then test if it is still doing what it was doing when it was written out by hand. Below some code examples from a real world project of mine, where I was “I don't even know how this would work!” and you can see my first demo was no where finished, I had over a hundred lines of animation code! https://codepen.io/mvaneijgen/pen/YzgVKRo Then I forked the first version and started to optimise a few things, swapping out fixed values for dynamic once, but still going on writing each tween out by hand, there even more lines of code now! https://codepen.io/mvaneijgen/pen/gOEWYZp In version 3 I finally found that I had the animation down like I want it, it could still use some fine tuning, but all the logic was there. Two hundred lines of code! https://codepen.io/mvaneijgen/pen/dyrRrvL And finally reducing that amount of code to just fifty lines by optimising what was already working and removing the duplicated code and adding it to a for loop. This is just an example, it might not even be the final code, but it is working! So now I can worry about accessibility making it responsive and making it fancy. But it's to illustrate that I could never come to the same conclusion that I’ve come to now if I had started with trying to optimise the code from the start. Personally I need to get a feel for what the code needs to do. Working in Codepen and forking your work is such a life saver, because you can fall back at earlier versions when you inevitably brake something, not to talk about GSDevTools what an awesome tool to debug an animation (🫢 did you know you could just use that paid plugin, even if you’re not a member on Codepen for free!) If you can do this at your first go writing out a project, why are you even reading this?! And we love to have you helping around here on the forum, it is great to have such a keen eye help out!

Ah shucks @GreenSock. Thanks for the kind words! I'm not an expert at developing sites that use right-to-left text. But I am a hopeless fanatic when it comes to GSAP. I use it everyday. Thank you to everyone here who makes such an awesome product and supportive community.

Hi @Ahnaf Ahmed second post in two years! Can you please keep the post to a minimum, it is a bit much 🤣 Why not create one timeline with one ScrollTrigger? Seems much easier to manage in my opinion and next items can never start before the others have moved. I've moved some of your HTML around and removed the fixed properties from your CSS, so that ScrollTrigger can handle all the pinning for you and thus release them when you want it to. https://codepen.io/mvaneijgen/pen/xxBMYKm?editors=0010 You of course want to change something based on the text that is coming in. That you can do by using some clever timing and adding some extra tweens to your timeline. Check it out here I animate the clip-path of the .polygon element each taking 1 second and because there are 4 items and the duration of the last tween is 4 seconds it will exactly line up with the scroll tween that start at second 0 using the position parameter. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/Jjzxpjx?editors=0010

Sounds like a good start! Try that and see how far you can come, throw in some solid debugging effort if it's not working and then post back here with a minimal demo if you still need help.

Hi @SamStAubyn welcome to the forum! Don't worry about it, we've all been there! I once spend two days with a colleague debugging a piece of code that returns some data and because it was encoded with a an extra space at the end it was not working! Glad you've solved your issue. Happy tweening!

I haven't a .npmrc file in the root project. I have a GSAP Club license with the agency account, but there are in differents folders. EDIT: Had a .npmrc in the root of the user config folder. Thank you so much!

Hi there I need an expert in GSAP to build LTR + RTL Single Page

Yeah, once we see a minimal demo, we'll be in a better position to offer advice but I just wanted to chime in and mention that we have seen Chrome have some rendering bugs (totally unrelated to GSAP) on very wide screens. So GSAP is setting the values properly, but the browser forgets to repaint elements in certain circumstances - you can check Dev Tools and see that the element is where it's supposed to be, but my guess is that the browser was doing some kind of flawed "optimization" if the screen was too wide. Perhaps it was tiling the bitmap for the CPU texture, breaking it into chunks and it forgot to update certain pieces. Sometimes there are tricks to force the browser to re-render stuff, but again, none of that has anything to do with GSAP. I'm not sure that's what you're running into or not, but I figured I'd mention it just in case. Maybe try setting will-change: transform on some of the elements, including the container(s).

Ummm...I know @creativeocean personally and can absolutely vouch for the fact that he's a top-notch expert in GSAP. I'm not sure about RTL stuff in particular, but if you can somehow convince him to help you with anything GSAP-related, you'll be better off for it. He's a real asset to any team. I don't say that about many people, but he has earned my endorsement 💯.

Hi, That's because the GSAP core instance is the same in both the useGSAP hook and the GSAP instance you installed as Jack already explained here: In the case of your last demo, the GSAP object is the same. Registering the useGSAP hook as a plugin is only needed in this very particular case, when you have the gsap-trial package. The gsap object from the gsap-trial package is different from the gsap object in the useGSAP hook. In your code you'd have this with gsap-trial: import gsap from "gsap-trial"; While internally the hook does this: import gsap from "gsap"; That means that in the same project there are two different gsap packages installed (all are the latest version though), gsap and gsap-trial, the first is used by the hook and the other is there in order to use the bonus plugins in these type of development environments, that's all. Hopefully this clear things up. Happy Tweening!

Hi, Not really TBH. What you're trying to achieve is not the simplest thing to do and adding stuff through a CMS only brings more complexity to it since you need a 100% dynamic solution for this. As I mentioned before the issue resides in the start and end points of each ScrollTrigger, having different sections for the SVG only adds an extra wrinkle to this. Here are a couple of demos that use different approaches to this: https://codepen.io/creativeocean/pen/zYrPrgd https://codepen.io/oliviale/pen/jOryjNX Finally this mostly boils down to your layout more than anything else. I forked your demo and added different indents and ids to each ScrollTrigger instance and you can see in section 2 your SVG is waaaaay too tall, it goes beyond the final spacing element. The mask and path for that section also is the same height but the actual drawing is smaller, that's why that section's draw animation finishes before the end point of the ScrollTrigger instance is reached: The light blue rectangle is one of the SVG tags for section 2, but the path finishes quite before that, that's why you're getting those pauses between sections. https://codepen.io/GreenSock/pen/QWoYQQQ You can see that the end point for scroller 3 is way after the animation already ended Again this boils down to HTML/CSS/SVG and not a GSAP related issue and is beyond the scope of the help we can provide in these free forums. You have to find a way to make your SVG to dynamically adapt to the dimensions of the content and the screen. Good luck with your project! Happy Tweening!

@mvaneijgenThis is what I have been trying to create. Thanks for the big help!

It is always a good idea to log your values while developing to make sure what you think should happen is also happening. In your case you're just setting the reversed state of the timeline, visually this does nothing it just toggles a value from false to true. What you want is to check if this value is true or false and then .play() or .reverse() (reverse() is different then .reversed(), see the docs if you want to learn more https://gsap.com/docs/v3/GSAP/Timeline/reverse()/ https://gsap.com/docs/v3/GSAP/Timeline/reversed()/) I also highly recommend updating your syntax to the latest version, also instead of x: '0%' we have a property build in for percent values eg xPercent: 0 and you can set the reversed state directly on the timeline it self, so you don't have to set t1.reverse(); Hope it helps and happy tweening! Side note right now it is only possible to click on the text "MENU" to toggle the animation, and because the text moves when you hover you could miss click, I would make it so what everything that you click on would trigger the animation. https://codepen.io/mvaneijgen/pen/XWGOaBZ?editors=0011

Amazing, thanks Jack—this is perfect. Presumed it was the gotoPanel function but would never have been able to figure out that logic without your input so big thanks! Will be using this a lot down the line I think. Thanks again!

Think of autoAlpha like simply "opacity" that will automatically set visibility: hidden if/when it hits exactly 0. So yes, you can set autoAlpha to any value between 0 and 1, inclusively. If it's non-zero, visibility will be inherit.

Hi Tom, Are you an expert in RTL sites?

Hi, The autoAlpha option is a combination of opacity and visibility, so when you tween/set the autoAlpha value to 0 what GSAP does is animate the opacity to 0 and when the tween is completed it sets the visibility to hidden. If you have an element with opacity: 0 and visibility: hidden and you tween autoAlpha to 1, GSAP starts by setting the visibility property to visible and then animates the opacity to 1 (or any other value different than zero that you passed in the config object. Hopefully this clear things up. Happy Tweening!

Yes, we use Google fonts with their font loader script to avoid FOUT. I hate my answer to the next question but my manager will not allow me to share (I don't think he understands that browsers have a 'view source' feature.) - I can outline our approach We link our Google Campaign Manager and Google Studio files to the Greensock cdn to get the base animation library, membership extra files (well worth the membership fee, plus you support the developers) need to be added like any other JS file. We also link to the Google fonts. By linking to these services, Google Ad Server doesn't count the weight of Greensock (base) or Google fonts against our total KBs allowed. We basically build what we think is going to be the heaviest banner first. If we have any issues with file weight, animation timing, etc. then we know early. Once the Creative and Account team review and approve the initial build we create the resizes by just copying that folder and making adjustments to the layout, if we build the animation correctly then 95+% of the time we don't even need to touch the JavaScript. We use gsap timelines for all of our animation, only occasionally needing to call a second timeline for animation that spans multiple key frames. We use the Chrome plugin called "Perfect Pixel" to match up the layout of each keyframe to the artwork provided (our developers do NOT design) We meet with the creative team to write up animation notes and confirm that we're under the maximum allowed time. I looked at creating responsive banners but we had too many issues, we ended up building one set of files for each banner dimension but since we can usually use the animation in each size without having to touch anything (gsap for the win!) it's working very well for us. I'm sorry I can't provide one of our templates if I had my way I would gladly do so, also because I'm sure you might come back to me with a suggestion for improvements but if I want to keep my jerb...

My team and I build about a dozen banner ads a week. We just do straight HTML/js, we haven't found a graphic banner tool worth the trouble. We rely on gsap timeline and Google fonts, neither of which add file weight because of the CDN. Most of our file weight is graphics unless we add a gsap members files and those only add a KB or two. Coupled with how awesome Greensock tutorials are and their response on this forum is we are getting by like bandits. With that said it is my opinion that if you do as many banners as we do straight HTML is the way to go, if you only do one a month I would use Google Web Designer but I would also quit my job.

Hi Tom, thanks for quick response. I have done what you suggested but still have not found right solution. I believe it will be simple and quick for professional. Easy money to collect... Greensock guys say it is a bit beyond the support they offer around there because it relates to media queries and responsive layouts. I can understand it, they focus on GSAP topic. Wish you all the best. Jiri