delux Posted June 18, 2020 Share Posted June 18, 2020 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 More sharing options...
ZachSaucier Posted June 18, 2020 Share Posted June 18, 2020 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. 1 Link to comment Share on other sites More sharing options...
delux Posted June 18, 2020 Author Share Posted June 18, 2020 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 More sharing options...
ZachSaucier Posted June 18, 2020 Share Posted June 18, 2020 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. 3 Link to comment Share on other sites More sharing options...
delux Posted June 19, 2020 Author Share Posted June 19, 2020 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 More sharing options...
delux Posted June 19, 2020 Author Share Posted June 19, 2020 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 More sharing options...
ZachSaucier Posted June 19, 2020 Share Posted June 19, 2020 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) Link to comment Share on other sites More sharing options...
delux Posted June 19, 2020 Author Share Posted June 19, 2020 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 More sharing options...
ZachSaucier Posted June 19, 2020 Share Posted June 19, 2020 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 More sharing options...
delux Posted July 7, 2020 Author Share Posted July 7, 2020 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 More sharing options...
ZachSaucier Posted July 7, 2020 Share Posted July 7, 2020 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now