CS2 case opening animation

[displaynameee]

I want to create CS2 case opening animation in my Nuxt 3 project using GSAP plugin.  I am using  gsap in my project for the first time, so I am facing many difficulties.

 

The result I want to achieve is to make the case opening animation like in cs2. However, my result is far from that. I am facing these problems.

1. I can't create a loop with gsap.
2. Transitions between animations are not smooth they should move as if they were a single animation.

I have shared the code in the codepen url but I couldn't get the Vue code to run in the codepen. Currently, the only working part of the code is that the indicator stops on the earned item when the animation ends.

 

See the Pen xxoKxPr by tahmasibb (@tahmasibb) on CodePen

[Rodrigo]

Hi @displaynameee and welcome to the GSAP Forums!

 

First I have no idea what a CS2 case animation is to begin with.

 

Second, if you want to create a horizontal loop with images, I'd recommend our Horizontal Loop helper function:

https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop

 

Finally, codepen can't run Nuxt, for creating Nuxt demos we recommend using Stackblitz. You can fork one of our starter templates if you want, or you can login for free on stackblitz and create a demo from scratch, just remember to keep the demo as small as possible:

https://stackblitz.com/@gsap-dev/collections/gsap-nuxtjs-starters

 

Happy Tweening!

[displaynameee]

@Rodrigothank you for your fast reply. Here is the url of a video showing how the chest opening animation works in c2. this is the result i want to achieve: https://drive.google.com/file/d/1e30JeHr4W3XjsDmJzmXcPA5o9LLRwlak/view?usp=sharing

 

Problem: The next thing I cannot get is to run 2 or more animations as a continuation of each other. as you can see from the video, at first the animation starts fast, then slows gradually, runs in sync with the audio, and finally the indicator stops on the earned item.

 

What I've tried:   i've created 2 animations. Let's think animation duration is 8 seconds, the first 6.5 seconds run a startup animation, and the last 1.5 seconds run a second animation to place the earned item inside the indicator.

But when these animations run, they do not run as a continuation of each other: https://drive.google.com/file/d/1ukxZSj8XpNZSaQfkxWPD2dLMYekS5og6/view?usp=sharing

 

What i want to achieve:

1. the animation should start fast and slow down gradually,
2.  the items should cycle in a seamless loop.
3. the animation should move in sync with the audio.
4. the indicator must remain on the earned item when the animation ends.

Please let me know the unclear parts so I can give a more detailed explanation. i found attached forum to create seamless loop  using modifier by duplicating items. Currently i am trying to apply this modifier to my project and will share with you Stackblitz url. 

 

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[displaynameee]

@Rodrigo @GSAP Helper thank you for your attention. this is the StackBlitz link: https://stackblitz.com/edit/nuxt-starter-78dzth?file=pages%2Findex.vue

 

You have to click "Open" button to view the animation. Actually, there is an audio in my project  that runs when animation starts  but i wasn't able to insert that audio to stackblitz folder. So, i commented audio related codes in this code.

 

In the previous comment, I tried to explain the problems in the code and what kind of animation I wanted to make as clearly as I could. If there is anything that is not clear, please tell me.

[Rodrigo]

Hi,

22 hours ago, displaynameee said:

1. the animation should start fast and slow down gradually,

That boils down to the easing of the animation, once again use the horizontal seamless loop for this, you can use the toIndex method that exposes:

https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop

 

22 hours ago, displaynameee said:

2.  the items should cycle in a seamless loop.

Once again use the seamless loop helper function

22 hours ago, displaynameee said:

3. the animation should move in sync with the audio.

That is a bit more complicated, you'd have to give the animation the same duration of the audio file.

22 hours ago, displaynameee said:

4. he indicator must remain on the earned item when the animation ends.

Once again, that can be achieved with the toIndex method exposed by the horizontal loop helper function.

 

Check the demos we have in the helper function page in order to experiment how it works and how that can be achieved.

 

Finally I would recommend you to create the helper function after all the images have loaded to prevent issues.

 

Hopefully this helps.

Happy Tweening!

[displaynameee]

I almost got the result I wanted. I've updated the code on stackblitz project: https://stackblitz.com/edit/nuxt-starter-78dzth?file=pages/index.vue,components/CaseOpen.vue,app.vue,components/CaseAnimation.vue
 

I just need to dynamically change the duration of the gsap loop animation and final animation based on the index of the earned item.

Currently, i've duplicated the items to create the loop. i know this is not a good approach, will try to use seamlessLoop helper function instead.

 

[displaynameee]

For the latest update. I managed to integrate horizontalLoop function, used gsap.timeline(), onStart, onUpdate, onComplete functions, timeScale property to manage the loop duration and achieved the result I want. thank you both for helping me