[Do I need to use the "will-change"?]

Hi friends!

 

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

[How to use Timelines instead Tweens with .batch() method of the animation complex objects?]

Yes, it works! Thanks!

[How to use Timelines instead Tweens with .batch() method of the animation complex objects?]

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...

See the Pen JjRRyzr?editors=0010 by nickicool (@nickicool) on CodePen

[Animation of dynamically added elements with stagger (infinite scroll)]

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. 😊

 

[Animation of dynamically added elements with stagger (infinite scroll)]

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?

[Modifiers Plugin for Infinite Image Carousel]

On 3/6/2020 at 9:20 PM, OSUblake said:

@ZachSaucier your demo doesn't seem to snap correctly after dragging.

 

But here's another way.

 

 

 

 

Also, I would got rid of setting type: "x" on the Draggable as it will prevent dragging if you initially start dragging on the y axis, but then change direction.

 

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"...

[How to toggle a class on the play and reverse a timeline animation?]

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?

[How to toggle a class on the play and reverse a timeline animation?]

15 hours ago, ZachSaucier said:

Hey Nickicool. It's more efficient to create the animations at the start and just use control methods to control the animations.

 

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".

[How to toggle a class on the play and reverse a timeline animation?]

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).

See the Pen yLJrBaE by nickicool (@nickicool) on CodePen

[Set timeline for each stagger item]

@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.

 

See the Pen gOMdgqx?editors=1010 by nickicool (@nickicool) on CodePen

 

Now everything works the way I want it to! I also want to thank you for the link to your article-a great guide!

[Set timeline for each stagger item]

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!)

See the Pen rNLZemG by nickicool (@nickicool) on CodePen

[Problem with ScrollTrigger.saveStyles and ScrollTrigger.matchMedia]

Thank you! This work solution for me!!!

[Problem with ScrollTrigger.saveStyles and ScrollTrigger.matchMedia]

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!

See the Pen oNLzeog?editors=1010 by nickicool (@nickicool) on CodePen

[How use ScrollTrigger.matchMedia() in my case?]

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.

[How use ScrollTrigger.matchMedia() in my case?]

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.

[How use ScrollTrigger.matchMedia() in my case?]

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() {
        }
    });

 

[How use ScrollTrigger.matchMedia() in my case?]

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.

See the Pen xxOZwjK by nickicool (@nickicool) on CodePen

[Why do you use offsetHeight in one of the parallax examples?]

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).

See the Pen OJyPmgX by GreenSock (@GreenSock) on CodePen

[How to fix the animation of pseudo elements and to optimize the performance of the code?]

58 minutes ago, ZachSaucier said:

Nope. The only alternative is to use real elements instead of pseudo-elements. 

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?

[How to fix the animation of pseudo elements and to optimize the performance of the code?]

6 minutes ago, OSUblake said:

Use a timeline.

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")?

 

 

6 minutes ago, OSUblake said:

And zoom is not standard. Use scale.

https://developer.mozilla.org/en-US/docs/Web/CSS/zoom

Thanks for the great tips!

[How to fix the animation of pseudo elements and to optimize the performance of the code?]

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:

1. What am I doing wrong, how do I do it right?
2. And how can I optimize this example in terms of performance, given that everyone has the same scrollTarget.

 

 

See the Pen zYqZEYZ?__cf_chl_jschl_tk__=70345f77e75071942f0b852760b6275261296917-1598379171-0-ATNiJruMI5o8mRZpd7Dz4prIuLbPo71p9FzVcvyYshTKUJwj-pzeAhrbupvWZzHnPJ6yzEVeMzkUq347mkPC5j360rEmc9VnDP8yPPLU7C46JGXnxPHI1k4_Dgxa_CcWQd8SWwv74Yz4 by nickicool (@nickicool) on CodePen

[How zoom animate for :before and :after element?]

2 hours ago, Visual-Q said:

I think you just want use scale: 3 not transform: 'scale(3).

 

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

[How zoom animate for :before and :after element?]

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.