Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

Poylar's Achievements

  1. Even if I put the opacity change before or after the move, it still works with jerk. How can I remove this jump?
  2. Thank you, I understand what you mean (finally) But I still don't understand how I can fix this in this case, if I first need an animation from 0 to .4, then movement, and then what I have in onComplete callback
  3. In the topmost example, the transparency on REPEAT ANIMATION does not change smoothly, it just rises to knowledge 0.4 because of this, a jerk occurs. In the second example, everything works as it should, but this is a simplified version without the initial shift and change in transparency, that is, it does not suit me.
  4. 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
  5. 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?
  6. 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
  7. 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.
  8. 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
  9. 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
  10. 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)
  11. + 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
  12. 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.
  13. 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%
  14. 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?
  15. 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.