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.

You mean that I should write my own custom handling of animation selection and resize control, instead of using the construction (?): ScrollTrigger.matchMedia({ // desktop "(min-width: 800px)": function() {}, // mobile "(max-width: 799px)": function() {}, // all "all": function() { } });

I have blocks on the page that are loaded dynamically (ajax). All blocks have a parameter that specifies the name of the function with GSAP animation. <section class="lazyload" id="examples" data-gsap-function="blockExamples"></section> <section class="lazyload" id="faq" data-gsap-function="blockFaq"></section> // this functions run by events (like click or after load content with ajax) var gsapFunctions = { blockExamples: function () { gsap.from("#examples img", { // ... }); }, blockFaq: function () { gsap.utils.toArray("#faq .item").forEach((item) => { var timeline = gsap.timeline({}); timeline //... }); } }; After loading the block content, I run the function that contains the code for animating this block. In the Codepen example, I emulated loading Ajax content by clicking on a button. Everything works well. But now I need to make alternative functions for some blocks with animations for the mobile/desktop version. I don't understand how this can be done in my case. I mean, I would like to keep the ability to record animations for different blocks in separate functions. Perhaps this is the wrong approach - please show me how to do it correctly.

This is not exactly a GSAP question. Why in one of the parallax examples do you use offsetHeight, instead of a fixed value like this: const movement = (1000 * depth)If use offsetHeight, elements with different heights and the same depth will move at different speeds. I want to figure out whether I need it or not. I also found that the images added by the ajax method do not work parallax animation, because for some reason they have zero height (or something that).

Well. I think I'll give up the pseudo elements for now and replace them with real ones. This is not a problem. But I don't understand what my error is using Timeline... Why are all the elements shown at once when scrolling, and not as they appear?

I tried earlier using Timeline, but it didn't work out at all. To show the result I make changes to the start Codepen (because I don't know how to insert a new one in the response): The animation stops working for the individual completely - all .item behaves as a single unit. Delay no longer works for pseudo elements - they are triggered immediately, but rather with a small delay (Yes, for .data-wrapper works well). Please help with the correct Timeline... This is my first animation. And about CSS vars - in my region, only 80% of the browser supports. I need a different solution... Is it possible to solve this if each .item has an additional unique class, such as .icon_x (where x is the ordinal number)? And in TImeline code use some like this .to(CSSRulePlugin.getRule("#js-traits-list .icon-1:before")? Thanks for the great tips!

Trying to create my first animation on GSAP. But there is a problem... If you scroll the page, the animation of pseudo elements is played incorrectly - they react all at once, and as many times as the number of elements. Moreover, the container with the text and the container with the SVG icon are animated correctly - each at the time when it appears on the screen. I have 2 questions: What am I doing wrong, how do I do it right? And how can I optimize this example in terms of performance, given that everyone has the same scrollTarget.

Yes, this is what you need! Thanks!!!

I'm trying to animate the appearance of an svg icon with a description below it. The icon has a wrapper with the pseudo elements :before and :after with a different background color. I want to animate the zoom of a pseudo element, but nothing works. The background color changes, but the zoom doesn't work. gsap.registerPlugin(ScrollTrigger, CSSRulePlugin); gsap.to( CSSRulePlugin.getRule(".icon-wrapper:before"), { duration: 3, cssRule: { transform: 'scale(3)', background: 'red' } }); Help me, please. I don't know what to do.