Jump to content
GreenSock

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

How i can do this with gsap?

Recommended Posts

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%

See the Pen gOvgyON by poylar (@poylar) on CodePen

Link to comment
Share on other sites

That video looks like it's simply a 24-bit .png with transparency (white clouds varying in opacity) that gets animated right-to-left. If you want it to seamlessly repeat, you'd need to create a pattern where the image's left side matches up with its right side (seamless) and then just butt them up next to each other and as soon as the left one is off-screen to the left, make it jump over to the far right side and do the same thing with the duplicate. Don't forget to set the ease to "none" if you want it to travel at a constant speed. 

 

Good luck!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

+ 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

Link to comment
Share on other sites

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?
 

 

  • Like 1
Link to comment
Share on other sites

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)

Link to comment
Share on other sites

4 minutes ago, Poylar said:

Basically my question is how do I start the opacity animation when the x-axis movement going to complete

 

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.

:)

 

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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: 

See the Pen gOvgyON by poylar (@poylar) on CodePen

work ok: 

See the Pen ZErejKY?editors=1010 by poylar (@poylar) on CodePen

how is possible?

Link to comment
Share on other sites

I think I've read your post 4 times now and I'm completely lost. I have no idea what your question is. Your CodePen doesn't match your description at all and I don't see anything that's acting strangely. It all seems to be doing what it is supposed to do. What am I missing? 

 

Please keep your question and your CodePen as simple and succinct as possible. I'd like to help, but I just have no idea what you're looking for, sorry. 🤷‍♂️

Link to comment
Share on other sites

7 hours ago, GreenSock said:

Кажется, я прочитал ваш пост уже 4 раза и совершенно потерялся. Я понятия не имею, о чем ваш вопрос. Ваш CodePen совершенно не соответствует вашему описанию, и я не вижу ничего странного. Все вроде бы делает то, что должно. Что мне не хватает? 

 

Пожалуйста, старайтесь, чтобы ваш вопрос и ваш CodePen были как можно более простыми и лаконичными. Я хотел бы помочь, но я просто понятия не имею, что вы ищете, извините. 🤷‍♂️

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Yes, that's because you coded it to do that. First, you're animating the opacity to 0.4 in the outer timeline. In the onComplete, you're creating an entirely separate, infinitely-repeating timeline that animates to 1 (from whatever opacity it is at that point which in this case is 0.4!). So it animates from 0.4 to 1 and eventually at the end of that timeline, you animate back to 0. So when that timeline repeats, it does exactly what it did the first time through, animating opacity from 0.4 to 1 to begin with. That's why you see it jump from 0 to 0.4. It's precisely what it is supposed to do (otherwise, it wouldn't be an accurate "repeat" if the first time through it animated from 0.4 to 1 and on future iterations it animates from 0 to 1). 

 

See the problem in the way you coded it? GSAP is doing what you told it to do. :)

 

 

Link to comment
Share on other sites

14 minutes ago, GreenSock said:

Да, это потому, что вы закодировали его для этого. Во-первых, вы анимируете непрозрачность до 0,4 на внешней временной шкале. В onComplete вы создаете совершенно отдельную, бесконечно повторяющуюся временную шкалу, которая анимируется до 1 (от какой бы непрозрачности она ни находилась в этой точке, которая в данном случае равна 0,4!). Таким образом, он анимируется от 0,4 до 1, и, в конце концов, в конце этой временной шкалы вы анимируете обратно до 0. Поэтому, когда эта временная шкала повторяется, она делает то же самое, что и в первый раз, анимируя непрозрачность от 0,4 до 1 для начала. Вот почему вы видите скачок от 0 до 0,4. Это именно то, что он должен делать (иначе это не будет точным «повторением», если в первый раз он анимируется с 0,4 до 1, а при последующих итерациях анимируется с 0 до 1). 

 

Видите проблему в том, как вы ее закодировали? GSAP делает то, что вы сказали.:)

 

 

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

Link to comment
Share on other sites

Even if I put the opacity change before or after the move, it still works with jerk. How can I remove this jump?

Link to comment
Share on other sites

Are you saying that you want the very first iteration of the animation to be DIFFERENT than future iterations? Then separate them. There are many ways to do it. Here's one: 

See the Pen dydvxaL?editors=0010 by GreenSock (@GreenSock) on CodePen

 

  • Like 2
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.
×