Poylar

Above I gave two concise examples. One of them doesn't work correctly. The spawn animation twitches on replay, and you can see it visually. The second pen code for comparison is that it is not there. I don't understand how you don't see it

oh god, im wrong. i cant understand realy, help me please. I will try to describe everything in as much detail as possible. My first animation is moving the canvas to the left by 200 pixels and at the same time its transparency becomes 0.4 , after this I call a callback upon completion of this animation in which I start a new timeline. Where the same block must pass another 650 pixels without acceleration and become transparent 0, after that the same block must again leave the transparency to the right (simultaneously with the exit) and the current timeline in the callback must be repeated. But if I set transparency in the first timeline, then in the second it will not animate. WHY? I have tried everything and every piece of advice, but please take a last look at this codepen and help please. I'm really going crazy already. compare there is two codepens Fail: https://codepen.io/poylar/pen/gOvgyON work ok: https://codepen.io/poylar/pen/ZErejKY?editors=1010 how is possible?

yes, i tried do this, anyway i solved my problem. for some reason this dont work and animation twitches tl.to('.js-smoke', { opacity:.4, x: 0, duration: 1.5, onComplete: () => { const tl2 = gsap.timeline({ repeat: -1 }) const target = '.js-smoke' tl2.to(target, { duration: 1.2, opacity: 1, }) tl2.to(target, { duration: 4, x: -650, ease: 'none' }, '=') tl2.to(target, { opacity: 0, duration: 1.2, }, '-=2') } }, 'Sametime') but this work perfect tl.to('.js-smoke', { x: 0, duration: 1.5, onComplete: () => { const tl2 = gsap.timeline({ repeat: -1 }) const target = '.js-smoke' tl2.to(target, { duration: 1.2, opacity: 1, }) tl2.to(target, { duration: 4, x: -650, ease: 'none' }, '=') tl2.to(target, { opacity: 0, duration: 1.2, }, '-=2') } }, 'Sametime') tl.to('.js-smoke', { opacity: .4 }, '=') idk may be noone checked my codepen, but i lost for this 2 days

Yes, these questions are similar, but in that topic I went a little in a different direction. I just tested this and I can't figure out why my previous timeline is being called when the new timeline is repeated.

Simple const oldtl = gsap.timeline() oldtl.to(elem, { x: 10000, onComplete: () => { const tl = gsap.timeline({ repeat: -1 }) tl.to(elem, { x: 100, opacity: 0 }) } }) How remove x 10000 after complete? Now after calling the callback and playing the animation there, I still get x 1000 every time at the beginning of the animation

thank you, but if you look my codepen, i already used it, but when repeat i dont have animations. i realy cant understand what i do wrong . Why when repat this is not animation opacity again https://codepen.io/poylar/pen/gOvgyON?editors=1010

Yes, I perfectly understand that no one is obliged to answer me here. I would love to use the services of freelancers, but I'm just learning and I'm also a developer Basically my question is how do I start the opacity animation when the x-axis movement going to complete (not onComplete callback)

+ the source of this PNG with hard edges, that is, you can clearly see where the smoke begins and ends, because I scale it so that these edges are not visible, I don’t know how this is the right decision

Thanks for the answer, but I have a little different. smoke appears smoothly at the same time goes from right to left and smoothly disappears in motion, then it repeats again, it goes to the right and goes to the left (For this I did in the x: 0 function after disappearing. But if you look in my the codepen is not quite like in the video.

https://gyazo.com/566f54f171cc026a674c98fec87deeaa I'm talking about the smoke effect. The problem is that I created a repeater and it doesn't want to do everything smoothly. function repeatSmoke() { const smoke = gsap.timeline({ repeat: - 1 }) smoke.to('.js-smoke', { xPercent: -25, duration: 4 }, '-=25%' ) smoke.to('.js-smoke', { opacity: 0, duration: 4, }, '-=25%') smoke.to('.js-smoke', { x: 0 }) smoke.to('.js-smoke', { opacity: .3 }) } THAT is maybe I want the first frame of this repeater to overlap the last one with -=25%

https://jsfiddle.net/7agmj0fo/ (codepen dont work) I already asked a question here and was advised to use flip. But I realized that I need to initially hide the element from the document so that it does not occupy a height, and then return it and so that the height becomes normal (To not specify a fixed height). How can this be implemented?

I don't know where to start because I want the height to adjust to the content. I can calculate the height of the hidden elements and increase the height based on them, but I also need the height to increase from the center and not from the bottom or top. + Also, because of this decision, you will have to initially set the minimum height.

yes i used. i mean if i set fixed height to elem this is not adaptive,

Thank you for your answer. So you suggest me to animate the height, because it's easier. So what's the next step? Do I need to set a fixed height? Or how would you do it?

Many browsers recommend only animating transform and opacity. So how can I do something similar to the GIF? Interested only animation block height. I should note that there are several such blocks in a row and they are all in the swiper. I ask for any advice or maybe someone has an example. Thanks. https://gyazo.com/5e67ca35d6665e878cc46a435298b162

yes, thats good, but i need another solution. i want the height to animate up

I wanna something like this, but animated height . Any case?

yes, but I want to "link" two blocks, regardless of their location. You can look at the library that I threw off, I'm looking for something similar to gsap

https://gyazo.com/313a49ec416d5a126c0debc7dc6d0b63 I drew the animation that I want. Is it possible to do this with gsap? I'm not interested in animation, but snapping a line to the left or right side of the header so that it is kind of adaptive. also i know about leaderline.js , but this lib not popularity like gsap