Leaderboard

Problem here is that you are declaring tweens in both events with different delays, so lets say you click to make element visible and quickly clicked twice On first click, your element will start rendering after 0.1 second responding to 1st and 3rd click But after 0.9 seconds the tween with delay of 0.9 will start playing and disable rendering To avoid that you can call killTweensOf to kill tweens on sprite. But a better approach would be to disable rendering after your animation completes, Also if you want to use 0 duration tweens then you can instead use TweenLite.set method. Finally, if your animation just goes and back like that then you can define once and toggle it back and forth. Watch following video to know more about timelines and how you can take advantage of them to sequence your animations, there are more helpful videos on the channel.

Hello @DD77 I would suggest that you read and go over what @PointC, @Dipscom, and @Sahil advised in previous post replies in this topic. I noticed that they are having to repeat and answer the same questions over and over again. There is just not enough time in the day to help you build your entire project. Especially when most of the questions are not GSAP related, and it doesn't seem like you are reading their great advice. We love to help everybody but it seems to me that your not even reading all the great help they are providing you. Especially with all the time they have spent going above and beyond to help you with non related GSAP questions. Questions that are really more about javascript and CSS basics. It doesn't look like you are trying to take there advise to heart, or even appreciate all their hard work in helping you, on their free time. All I can do is hope that you will re-read this entire Topic from page 1. Please go over all the examples they provided, and visit the Mozilla Developer Network (MDN) to learn more about Javascript and CSS. MDN JS: https://developer.mozilla.org/en-US/docs/Web/JavaScript MDN CSS: https://developer.mozilla.org/en-US/docs/Web/CSS This way we can focus more on the GSAP API and not keep repeating questions that have already been answered in previous pages and post replies in this topic by these great scholars and gentlemen. Thank you

There is no button to mark topics as solved, some users just edit title to mark it. Though I like forums with "Solved" button.

1. isActive() Since you have so many timelines and animations that could be running, you may want to just use a global variable to allow/disallow clicks instead of isActive(). I mentioned it earlier in this thread, but here's a really simple example. I've used a canAnimate variable and a status variable to approximate what you have happening in your project with things being open or closed. This also avoids the animationIndex variable that you increment with some of your clicks. 2. Target all other links except the one that was clicked. There are many ways to do this. Earlier in the thread I think I showed you how to use jQuery's :not selector. Another way to handle this would be get the children of the siblings and animate those divs. 3. Main menu isActive() - see #1 above 4. When you want to reset everything, there would be a number of ways to do it. You could seek() the progress() of the various timelines, you could set() the elements where you need them. You could also use clearProps(). https://greensock.com/docs/Plugins/CSSPlugin#clearProps As with all things GSAP (or JavaScript in general) there are many paths to the same destination. Happy tweening.

Hi, Aphalina Animator is a visual authoring tool that produces human-readable gsap + svg code. I just launched version 1.2 with some new features: path motion, hand-drawing imitation, clip masks, sprite sheets, sequence animations (similar to GSAP staging). It is paid app but can be used for free for non-commercial projects. Project link is aphalina.com. Any feedback is highly appreciated!

Sorry about the limited info, I've got it to work though thanks to you guys! In my case, it was Nuxt (SSR) related. if(process.browser) { CSSRulePlugin = require("gsap/CSSRulePlugin") } Thanks again!!

First of all, welcome to the forums (and GSAP), @madleo. I'm not quite sure what you mean by "CSSRulePlugin does not seem to be made available." Are you importing it like this?: import CSSRulePlugin from "gsap/CSSRulePlugin"; Or if you prefer, you could do this: import { CSSRulePlugin } from "gsap/all"; Does that help?

This affirmation is not correct, is it? You don't mean when you click twice in the same button. You mean when you click on a button A, then click to go back and then click once again on button A. Now, how is this new question any different from everything we have been discussing here? Go over your code, line by line, read and understand what each and every single line is doing. If you can't understand what the code is doing, go and take a course on basic JavaScript because you really need it. I will give you a hint to solve your issue: you need to remove ONE line from your code and it will work. I will not tell you which line it is.

@DD77 Craig and Pedro have done a great job in trying to help you figure out problems in your project. Though I would like to intervene because we can't spend so much time on a single question. We try to keep this forum focused on GSAP API related questions only. We occasionally do help members a bit more but with the intentions that they will use it as example to learn from and can expand it into what their desired goal is. I get it that you are using GSAP but still all of your questions are related to general JavaScript. Now to use GSAP or any animation library you need strong foundation of CSS and JavaScript basics so you can position your elements how you like and make them interactive through JavaScript. We don't resources to answer and explain JavaScript related questions. We have already provided you some helpful resources that will help you build your foundation. And we would be happy to point you to more resources to learn from if you need. We also have a sub forum where you can post to hire a freelancer to help you with your project. Or you can also look for a personal instructor. Feel free to post your requirements at the following link: https://greensock.com/forums/forum/15-jobs-freelance/ Hope this will help you resolve problems in your project. All the best.

Pretty tough to say since there is no demo posted, but your question sounds a lot like the same thing you asked in this thread 3 pages ago. Have you gone back through this whole topic again?

FreecodeCamp has a ton of material to get you from start to finish, not only on JavaScript but in general web dev plus more.

Nope. It's pretty clear we're not gonna make it to the finish line here. This is what we needed. function onReverseComplete() { toggle = "closed"; } Now you can create and start a new timeline each time a box has reversed. This can be applied to your actual project now. You'd just substitute the image covers for the boxes in the timeline creation function. Here's the final version. I think @Dipscom & I have gone above and beyond with you on this project and it is apparent that additional training and practice is required here. I would strongly encourage you to visit the GSAP learning area and blog. Read through everything and really try to understand it. Practice more with your own small demos and projects. https://greensock.com/learning https://greensock.com/blog/ I'd also recommend some basic JavaScript training. There are loads of online resources for that. Best of luck to you.

Hi @popflier Yes you can add tweens to a timeline with add(), but in this case, that is not what the "part2" is doing. It's a position parameter label. I wanted both of those tweens to start at the same time so I used the label. More info about the position parameter can be found here: https://greensock.com/position-parameter In addition to labels, the add() method does allow you to add tweens, timelines and callbacks to the timeline. Yes they will play in sequence unless you add the position parameter. @Carl has an excellent article about creating timelines in functions and returning them to a master timeline with add(). https://css-tricks.com/writing-smarter-animation-code/ The "#image" target in that tween is indeed targeting #image1, #image2 and #image3 as it loops. You'll see that we have the index of the loop (i) in there? On the first iteration of the loop i has a value of 0 so we add 1 to that (i+1) which we then concatenate with the string "#image" and the result is "#image1". That's just one way of doing it. You don't even need the IDs on the images. We could get a node list and use that in the tween too. // get the elements var thePics = document.querySelectorAll(".image"); // this tween would do the same thing tl.to(thePics[i], tl.duration(), {opacity:1}, 0); I only used the IDs to show another option as I had already added an array option in one of the other tweens. tl.to(theTarget, 0.5, { backgroundColor:colors[i], ease:Linear.easeNone }, "part2"); That little index is quite handy for many things when you're looping. Hopefully that makes sense. Happy tweening.

Thank you for feedback! Yes, I want to port this app to Mac in the future but at the moment I focused on Windows version so can't promise anything. Unfortunately, no tutorials yet. I'm going to hire a technical writer for this task as soon as possible - hope will fill this void soon.

Congrats on the launch! Looks like a very powerful tool. I'm on a Mac so I can't test it at the moment. Do you have any Getting Started tutorials or videos? It would be great to see how some basic animations are built start-to-finish. Wishing you success with this! Would love to hear what other users think of it.

Hi, I’m working on general purpose GSAP+SVG visual authoring tool. I just published very first beta and I need feedback from GSAP community. This is the very early beta – not polished and have only small fraction of planned features. My main questions are: 1) Do you need tool like this? 2) Is user interface convenient? What should be changed in UI? 3) What are the most important missing features? You can download beta from project web site at: https://aphalina.com First version is Windows only. I will really appreciate any feedback, Evgeny

I proud to announce that I finally published first release. Many thanks to all of you who send me feedback! @davi Thank you for detailed feedback, Unfortunately current release is Windows only but I plan to add Mac edition in the future. Yes, app have it's own file format but the exported document is single html file with embedded js\svg\images. The only external dependence is GSAP library. I don't see any benefits in placing everything in single svg instead of single html and I'm afraid it can cause browser compatibility issues. Unlike bodymovin\Animate CC I''m trying to make result jscript easily readable\editable so I think it's possible to add some "snippet generation" workflow in the future. @Oliver16Years I spent some time trying same animations in code and in visual editor and I have to agree with You that if you work on complex animation and you know your animation library very good things can be faster with manual coding. I must admit that first version of my tool is mainly for people who can't code or don't want to learn GSAP syntax. But in general I still believe that one can be very productive using sophisticated visual tool. I hope I will be able to prove this with future releases of my app.