Nickicool

Hi friends! Do I need to use the `will-change: xxx;` property in CSS for animated GSAP properties?

Yes, it works! Thanks!

It may be simple, but I really can't figure out how to redo the usage example .batch () functions using timelines (instead of simple tweens). And I also need dynamically loaded elements by clicking on the button. I took the Codepen provided by user @ZachSaucier as a basis, but added SPAN to the DIV, for the complexity of the elements .card I wanted to use Timeline features like play() and reverse() to animate more complex objects .card than just an empty box...

This is the example I was looking for! Thanks! But I was wrong - it doesn't have dynamically (ajax) added elements. I'll try to do something myself, and if appear any questions - I'll write in this topic again. ?

I can't find an example of using GSAP to animate elements that are dynamically added (with the stagger effect) by clicking on the button on the page (for example, images in the gallery). I met somewhere on Codepen but did not save it for myself. Maybe someone has a link?

Why can't I make a fork of this pen? I would like to save it to my pens collection with a more understandable title than "Untitled"...

And every time I am amazed at how convenient and powerful GSAP is in work! But personally, I would be useful callback 'onReverse Start()' (which is called at the beginning of the reverse animation) which for some reason is not in the list of available. Is it possible to add this in future versions?

Thanks for the answer @ZachSaucier! Yes, I read aboute that the best way to create animations at the start, not during execution. But, what if the number of elements is large and not every one of them will be "opened/closed" (in the case of the FAQ)? In my case, I don't see a problem with performance... Maybe I don't see the "hidden dangers".

There was a problem, as it seemed to me in a simple situation. I need to toggle the class for an entry in the "FAQ" list. Opening the answer to the question (by clicking) add a class, and collapsing the answer-remove the class. I couldn't do it. I tried several options - none of them works correctly (all attempts are commented out in the code). The problem is that the class is added / removed randomly after a few clicks on the question (and its neighbors).

@ZachSaucier Thank you for the answer - you helped me a lot, directed me in the right direction! I made a one change in your example solutions: - content in ".item" can be more complex than a few paragraphs (this was just an example). That's why I wanted to use timeline instead of tweens to animate content. https://codepen.io/nickicool/pen/gOMdgqx?editors=1010 Now everything works the way I want it to! I also want to thank you for the link to your article-a great guide!

I need to controll the animation with only one scroll trigger (in the example Codepen below): Headers with "stagger" animation (this is easy to do, in the example it works) Paragraphs ("<p>") with staggers effect in each of the ". item" (and how to do this I do not know - in the example, non-working, incorrect code, just to understand which way I'm thinking). Please help me!)

Thank you! This work solution for me!!!

Hi! I have a problem on starting the animation. Animation elements are not set to the start position ("from" point) of the animation "behind the scene". This happens right before the animation starts, so the animated elements "flash" at the start of the animation. Experimentally, I found that the reason is in the "ScrollTrigger.saveStyles"method. But without it (if comment it), the animation also works incorrectly when changing the media query. Although the "blinking" disappears when the animation starts. I do not know how to fix it... Please help me!

You my hero dear friend @ZachSaucier!!! For some reason, I thought that the construction can not be used in every function, but only once, globally, initially writing all possible animation options in it. Without the ability to add animations gradually as the code runs.

I am not a very experienced programmer, please help me with the right direction of thoughts. Do I understand correctly or not that the animation selection should be implemented inside each function (and not outside of them): var gsapFunctions = { blockExamples: function () { //... }, blockFaq: function () { //... } } If I understand correctly, when resizing, I should kill the previous animation (anim.kill(); or aim.progress(0).kill()). To do this, I need access to the animation/timeline object... Am I right? In my code, functions don't return animation objects, and I don't have access to them.