Leaderboard

The trial isn't time-based. It's domain specific. So you can use the trial plugins for as long as you like, but only locally and on sites like codepen. https://gsap.com/resources/trial/ Hope that helps!

You don't need GSAP for that. You can just like @GreenSock suggested use the normal Javascript function .classList and add the class to the element you want, see the MDN docs for more info https://developer.mozilla.org/en-US/docs/Web/API/Element/classList Here an example with .add() which runs javascript to add a class. If you still need help please provide a minimal demo so that we can take a look at your setup, maybe also create your own topic, no need to bother all these people 6 years later. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/abMKpvX?editors=0011

A couple tutorials which may help. https://www.motiontricks.com/animated-handwriting-effect-part-1/ https://www.motiontricks.com/animated-handwriting-effect-part-2/ Other helpful info. https://www.motiontricks.com/cut-your-path-start-points-in-adobe-illustrator/ https://www.motiontricks.com/adobe-illustrator-path-direction-quick-tip/ https://www.motiontricks.com/svg-calligraphy-handwriting-animation/ Happy tweening.

As far as I can tell no, but I never even tried to do something like that so I've never searched for such implementation. Probably with enough custom logic it could be achieved but the costs in terms of performance and UX might not justify all the effort IMHO. Happy Tweening!

Hi, As Jack mentioned before, not allowing users to get back to a specific point using the scroll bar when there is scroll space sounds like bad UX, maybe something like this could be better? https://codepen.io/GreenSock/pen/ExMRXRB Hopefully this helps. Happy Tweening!

Hi @Martin Vanegue welcome to the forum! There is a lot going on in your demo! And I'm struggling to figure out what does what. I would suggest checking out this awesome getting started guide https://gsap.com/resources/get-started/ First and most important, you can't have transition: all 0.3s ease-in-out; on an element that you animate with Javascript You should never apply CSS transitions to anything that JavaScript is animating because not only is it horrible for performance, but it'll prolong all the effects because whenever JavaScript updates a value (which GSAP typically does 60 times per second), the CSS transitions interrupt and say "NOPE! I won't allow that value to be changed right now...instead, I'm gonna slowly make it change over time". So it disrupts things, adds a bunch of load to the CPU because you've now got CSS and JS both fighting over the same properties, but let's say you've got a 1-second tween and the CSS transitions are set to take 1000ms...that means what you intended to take 1 second will actually take 2 seconds to complete. Personally I would animate all the properties with GSAP instead of setting a class, that will be much easier to manage. You can't animate display. I would advise you to use opacity, this will be much more performant (certainly when the elements need to reappear again in the future) and also check out .set() which is a 0 duration tween, but that all gets explained in the getting started guide. The paused property is a boolean, maybe GSAP know what you mean, but I would get in the habit of setting paused: true, instead of passing it the string "true" I think it will be much easier to animate different elements instead of resizing and moving the same element to different places. So create .box1 ect, and then create .container1 which is the element that takes up the full screen. Or check out our Flip plugin https://gsap.com/docs/v3/Plugins/Flip/ This is already a lot of text, so I'll leave it at this for now. See how far you can come with this feedback and post back here if you have tried some more things (but be sure to keep it simple). Hope it helps and happy tweening!

Welcome to the GreenSock forums! Glad you’re here. It’s a wonderful place to learn and get your questions answered. What topics can I post about here? We love answering questions that are directly related to GreenSock tools. API questions, bug reports, or if you’re wondering why GSAP behaves a certain way - those types of posts are welcome around here. What topics should be avoided? As much as we love solving problems, the following types of questions are beyond the scope of what we generally provide here for free: Logic issues. JavaScript and application logic, CSS setup, and generic troubleshooting that isn’t directly related to GreenSock tools. Third party tools. Frameworks (React, Angular), other JavaScript libraries (LocomotiveScroll, Barba), build tools, etc. We’re happy to help with the GSAP part of things if you strip out as much irrelevant code as possible and provide a minimal demo. “How do I do this cool effect I saw on a trendy website?” Someone here may point you in the right direction but please don't expect a full tutorial on how to create and effect you saw on a slick web site. Where else can I go for help? If your question is primarily about another tool, try looking for a forum or GitHub repository about that tool. If it’s a general programming-related question, try StackOverflow. Want feedback about your working code? We’d be glad to take a peek at GSAP-specific code but for more general topics (like performance or application logic) we’d suggest something like CodeReview. Read first Please read Getting Started with GSAP, common GSAP mistakes (maybe also common ScrollTrigger mistakes), as well as the GSAP docs before asking your question. Often you’ll get your question answered just by doing that! Make a minimal demo This helps provide context and gives us a rough idea of what you’re trying to accomplish. It's WAY better than trying to dig into a live website with lots of other things going on, or looking at a small excerpt of code without much context. Pro tip: It's often easier to create a minimal demo from scratch rather than stripping out irrelevant things from your original project. You will GREATLY increase your chances of getting a prompt answer if you create a minimal demo. After you've posted a demo to our forums, please click the "Fork" button on CodePen before making future changes so that context is not lost for future readers of the forum. Be courteous We try to treat people the way we’d want to be treated around here. Please do the same. Also keep in mind that the people answering your post are doing so for free! Most of our regular contributors gain nothing from helping you except the satisfaction of doing so. Please give them your gratitude and respect. Ask away! We’re eager to help, so make a minimal demo and ask your question! We’ll do our best to answer it promptly. Pay it forward - help someone else The best way to learn is to teach someone. You’d be surprised how much you grow when you try answering some questions here! We are so grateful for the group of volunteers dedicated to helping others in these forums. It’s quite satisfying to come alongside a fellow developer who is struggling and deliver a clever solution to their issue. Become a contributor! You do NOT need to be an expert. Anyone...and we do mean anyone...is welcome here.

Hi @stemolti, And welcome to the GSAP forums! This page is a good starting point: https://gsap.com/docs/v3/Plugins/DrawSVGPlugin/ Some inspiration here: https://codepen.io/collection/DYmKKD?grid_type=grid Note: The DrawSVG plugin isn't required to create the effect you're looking for, but it makes it really simple, as it does all the complex SVG stroke calculations for you, which is well worth it, IMO.

Hi, This is a fork of Blake's codepen using GSAP 3 syntax, nothing extremely complex: https://codepen.io/GreenSock/pen/mdoKMgG Is worth noticing that the codrops demo (not always the easiest things to re-created might I add) is using masking for the specific effect. I'd suggest you to check this thread by @mvaneijgen on the subject: Hopefully this helps. Happy Tweening!

I found a solution by adding another plane on the very top of html and display it only on mobile. By looking for info, I found this topic : If people read this topic, it may be a good idea to have a look there. Thanks again

It's not really GSAP doing that. On line 28 you get all the children, that includes the button! If you remove the button from the parent it works better. I've also just called the shuffleList() in the button click but there is something off in your calculations that positions the elements. I don't have much time at the moment, but personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/dyreqXz?editors=0010

Hello there. Here are the problems in your pen that are responsible for it not working: You are gettting an error in console - there is no such thing as SmoothScrollbar.init() - it is Scrollbar.init() instead; nothing related to GSAP. Also, as far as i know, smooth-scrollbar does not have an 'effects' property; so that is probably redundant, too. I would suggest removing that to prevent any possible problems that might arise from that. You don't have a layout/setup that would work with smooth-scrollbar to begin with; you'll need to apply proper CSS styling on the body and the container you're going to initialize smooth-scrollbar on for it to work; nothing GSAP related. In CSS as well as in JS you are targetting elements with the class '.item' but you don't have any such elements in your HTML, you only have '.item-1', '.item-2' and '.item-3'; nothing GSAP related. Your .item element has a height of 0 set via CSS. Although in a comment you say you're going to set its height via GSAP, you never do. Again, less of a GSAP specific problem. And finally: You are not declaring a specified scroller element in your ScrollTrigger, which you will have to do, as smooth-scrollbar does not run on the body element. This one is something GSAP / ST specific; For clarity, see the smooth-scrollbar example and documentation on https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy() Since a lot of your problems arise from not properly handling smooth-scrollbar in the first place, I would suggest having a thorough look at their documentation. Smooth-Scrollbar is not a GreenSock product, so you really shouldn't expect to get support for it in the GSAP forum. I implemented the raw basics to the fork of your pen below - and it works as it should. I give no guarantee that it is bullet proof with regard to smooth-scrollbar though; you should check on all that yourself. https://idiotwu.github.io/smooth-scrollbar/ https://github.com/idiotWu/smooth-scrollbar https://github.com/idiotWu/smooth-scrollbar/blob/develop/docs/api.md Hope this will help get you going in the right direction though. Good luck! https://codepen.io/akapowl/pen/KKERaYE

Hi, @mvaneijgen created this thread regarding mask and clip animations: That in combination with MorphSVG and @PointC's blog resources should provide a good starting point for this. Good luck with your project and Happy Tweening!

Hey there @dzestis94 Your element has position: absolute so if you tween it down 100vh like you did, it will tween into your second section. It would need to be position: fixed for it to behave like what you probably expected as the outcome with the values you set for the path. Also, since you have set the end of all your ScrollTriggers to an absolute value of 100 via defaults, it would only scrub over the distance of 100px (from scroll-position 0 to 100) and that's probably not what you want either. I'm not sure if this is what you had in mind, but here's an example for how you could go about it. I kept the position of the element absolute, but changed the values of the path and the end of the ScrollTrigger instead, to match that absolute position of the element. https://codepen.io/akapowl/pen/qBYgzwP