[How do I add static motion to this animation?]

Thank you very much - you helped a lot!!

[How do I add static motion to this animation?]

 

Here, I got your solution to connect with mine - but it works extremely badly (.. buggy (

 

22 minutes ago, mikel said:

Hey @delux,

 

Do you mean such a constellation?

 

 

 

 

Happy tweening ...

Mikel

 

 

[How do I add static motion to this animation?]

11 minutes ago, mikel said:

Hey @delux,

 

Do you mean such a constellation?

 

 

 

 

Happy tweening ...

Mikel

 

Thank you very much for responding

This is roughly what I need, but how can I connect this to my script?

For me, the elements react to the movement of the cursor (

[How do I add static motion to this animation?]

Hello!

I have an animation of flying elements on gsap - the elements move slightly when the cursor moves, please tell me how to make these elements move (a little slower) even if you do not move the cursor?

That is, the page loaded, and the elements began to float slightly .. moved the cursor - they move a little faster - is that possible?

See the Pen eYJagvz by Alexandr (@Alexandr) on CodePen

[How to pause / stop all animations?]

Hello!
He dealt with all the above-described errors .. but here's the problem, I have the function of adding a class to the selector * - and it works badly .. if you look from a mobile phone - the class is added and deleted several times per second - this is very noticeable

* White lines are added (change styles with a red background)

Please tell me, maybe there is a simplified version of such a function?

 

function addWhiteLines() {
    const animations = [];
    const white_lines = ['.mainBlock.pageHeader', '#desktop-menu li.main.active'];
    {
        let animation = new TimelineLite({ repeat: -1, onComplete: () => (animation.restart()) });
        animation
        .to(white_lines, 11.5333, {})
        .set(white_lines, {className:"+=show-red"})
        .to(white_lines, 8.4667, {})
        .set(white_lines, {className:"-=show-red"});
        animations.push(animation);

        $(window).resize(function(){
            animation.kill();
        });
    }
    return animations;
}

 

 

[How to pause / stop all animations?]

12 minutes ago, ZachSaucier said:

I think you want something like this?

const tl = gsap.timeline({
  repeat: -1, 
  repeatDelay: 16
})
.to(element, 1.7, middleSize, 4)
.to(element, 1.7, startSize)

Here, as I understand it, the starting position is the 4th second, but how to add the finishing 8th second?

Thank you very much for your responsiveness, but I apparently incorrectly formulated the question

 

I need a certain element to start from the 4th second, animate 4 seconds, pause or stop for 8

Our common slider consists of 5 screens, each screen is 4 seconds, each slide has a number of its own elements, and they should animate only on their own slide, and not endlessly - can this be done?

My first slide worked, its elements went into transparency, but they continue to animate - which carries a heavy load - and so with each slide ((

[How to pause / stop all animations?]

Or maybe something like that?
 

        const tl = new TimelineLite({
            repeat: -1, onComplete: (w) => {
                tl.pause(16);
                tl.restart();
            }
        });
        tl.delay(0);
        tl.duration(4);
        tl.to(element, 1.7, middleSize).to(element, 1.7, startSize);

 

[How to pause / stop all animations?]

Please tell me whether this can be done:

The element animates for 4 seconds (starting from the 4th second to the 8th), then pauses for 16 seconds, after which a restart occurs

 

        const tl = new TimelineLite({
            repeat: -1, onComplete: (w) => {
                animation.stop();
                setTimeout(() => {
                    animation.restart();
                }, 16000);
            }
        });
        tl.delay(4);
        tl.duration(4);
        
        tl.to(element, 1.7, middleSize).to(element, 1.7, startSize);

 

[How to pause / stop all animations?]

48 minutes ago, ZachSaucier said:

You could have an array of the animations and, depending on the index of the current section,  pause all of the timelines but play the relevant one with a matching index.

I beg you, could you show this in my example?

P.S Thank you very much for responding to my problem!

[How to pause / stop all animations?]

Hello!

I have a big slider with animations, and it gives a lot of load on the PC

P.S. I apologize for the text with errors - I am writing through transliteration (my language is Russian)

 

Question No. 1: How is it in those slides that are not visible to pause the animation, and run only for 4 seconds?

Question No. 2: How to put a stop on the entire animation with media <768, and start a new one with media> 768?

And is it possible to set the conditions for the media in the animation (I want to make it beautiful on mobile devices .. now we hide it)