Jump to content
Search Community

How to pause / stop all animations?

delux test
Moderator Tag

Recommended Posts

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)

Link to comment
Share on other sites

Hey delux and welcome to the GreenSock forums!

 

5 hours ago, delux said:

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

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.

 

5 hours ago, delux said:

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

I usually use media queries to do this sort of thing.

 

5 hours ago, delux said:

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)

It depends on what you mean. If you need to switch out the animation values it's probably best to kill off the old animation and create a new one. If you just mean can you use responsive units, then yes, you can use responsive units without issue.

  • Like 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Sorry, your example has a lot of code so sorting through to find only the relevant parts is asking a bit much of us. 

 

The core concept is as such:

const animations = [tl1, tl2, tl3, ];
const slides = document.querySelectorAll(".section");

// later in your slide animation function
function goToSlide(i) {
  animations.forEach((anim, j) => i === j ? anim.play() : anim.pause(0));
  // Your other code related to switching the slide/section
}

If you are still having trouble feel free to make a more minimal demo and we will try to help.

  • Like 3
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

1 minute ago, delux said:

I need a certain element to start from the 4th second, animate 4 seconds

Just change the duration of the tween to 4 seconds then? Perhaps I'm still misunderstanding you.

 

2 minutes ago, delux said:

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

That's not a very good way to approach it. Generally with sliders you want to only fire the animations relevant to that section. Don't use looping and delays because that's not very flexible. Just have a function that plays all of the animations for a given slide and use some sort of interval to go between slides. Similar to the psuedo-code that I provided above.

 

I think it might help you to modify an existing GSAP slider to meet your needs instead of building one from scratch yourself.

Link to comment
Share on other sites

  • 2 weeks later...

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;
}

 

 

Link to comment
Share on other sites

Sorry, it's pretty hard to debug just based on a video. Please make a minimal demo of the issue if you'd like our help debugging:

In general we recommend using GSAP to directly animate elements and not toggle class names and use CSS transitions.

 

Side notes:

  • We recommend using GSAP 3 syntax. See this post for more info:
  • Your resize function will run after the animation has finished on resize - you should probably remove it when the animation is done.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...