Poylar
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Poylar
-
-
2 hours ago, PointC said:
If you want the opacity to fade in on each repeat, you'd need to add it to the smoke timeline. Right now you have it in the setTimeout function. Why not just make it part of the main smoke timeline?
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:
work ok:
See the Pen ZErejKY?editors=1010 by poylar (@poylar) on CodePen
how is possible?
-
1 hour ago, PointC said:
If you want the opacity to fade in on each repeat, you'd need to add it to the smoke timeline. Right now you have it in the setTimeout function. Why not just make it part of the main smoke timeline?
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
-
46 minutes ago, PointC said:
Вы спрашиваете то же самое, что и в другой вашей теме здесь?
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
See the Pen gOvgyON?editors=1010 by poylar (@poylar) on CodePen
-
5 hours ago, PointC said:
I think you're looking for the position parameter. This will allow you to start the opacity fade before the x movement completes.
Happy tweening.
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
See the Pen gOvgyON?editors=1010 by poylar (@poylar) on CodePen
-
1 hour ago, Cassie said:
We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.
You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly.
This thread may be of help though?
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
-
9 hours ago, GreenSock said:
Это видео выглядит так, как будто это просто 24-битный файл .png с прозрачностью (белые облака разной степени прозрачности), который анимируется справа налево. Если вы хотите, чтобы он плавно повторялся, вам нужно создать шаблон, в котором левая сторона изображения совпадает с его правой стороной (бесшовно), а затем просто соединить их впритык друг к другу, и как только левая сторона будет выключена, экрана влево, заставьте его перепрыгнуть в крайнюю правую сторону и сделайте то же самое с дубликатом. Не забудьте установить легкость на «нет», если вы хотите, чтобы она двигалась с постоянной скоростью.
Удачи!
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.
-
1 hour ago, OSUblake said:
Вы использовали GSAP раньше? Если нет, я бы посоветовал ознакомиться с нашей статьей «Начало работы ». После этого попробуйте разобраться, и если вам нужна помощь, предоставьте минимальную демонстрацию , и мы сможем указать вам правильное направление.
yes i used. i mean if i set fixed height to elem this is not adaptive,
-
10 hours ago, OSUblake said:
Привет Пойлар,
Рекомендуемое не является реальностью. Некоторые вещи просто невозможно анимировать только с помощью преобразований и непрозрачности. Даже Google, который дает много таких рекомендаций, анимирует высоту в разделе « Люди также спрашивают », когда вы выполняете поиск в Google.
Я уверен, что если вы достаточно креативны, вы можете сделать эту анимацию только с преобразованиями и непрозрачностью, но это потребует некоторых размышлений, так как вам нужно выполнить кучу масштабирования счетчика, чтобы предотвратить искажение дочерних элементов. Наверное, на мой взгляд, не стоит. Я бы сначала побеспокоился о том, чтобы анимация работала наиболее очевидным образом, а затем, если вы заметите проблемы с производительностью, я бы попытался оптимизировать ее с помощью преобразований.
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. -
On 3/4/2022 at 2:17 AM, OSUblake said:
If I understand your goal correctly, this should point you in the right direction. 😃
yes, thats good, but i need another solution.
i want the height to animate up
-
-
3 hours ago, isobarczechrepublic said:
Вы можете сделать "адаптивные строки" тремя div'ами, которые будут выглядеть так, как вы хотите - адаптивность будет обеспечена обычным CSS. А для рисования вы можете сделать временную шкалу состоящей из трех шагов (каждый шаг для каждого div).
Другим решением может быть динамическое рисование/изменение svg путем изменения атрибута `d` в элементе пути ( https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths ). А для анимации используйте плагин DrawSVG от GreenSock.
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
How i can do this with gsap?
in GSAP
Posted
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