Animate a translation with an acceleration while a key is pressed?

[justintime]

Hi,

 

I'm not sure how to approach this problem.

Imagine a very long row (inifinite) of photos. With the horizontal keys, I want to scroll them. Begind the scenes, I simply use an animation on the translation. Each time I press the right key for instance, I use gsap with an easing in form of S and duration 0.3s or less. When keeping the key pressed it does not produce a very nice animation.

Instead, I would like to detect the fact that the key is held, produce an acceleration, then keep the speed constant. When the key is released, I need a quick deceleration and stop. Can gsap help in this matter? Should I simply animate a variable with gsap (my increasing X offset, i.e. simulating the acceleration)? Then use gsap again with a linear easing to translate by this X and a constant duration? Or is there another way?

 

Thank you

 

[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. ✅

[justintime]

Sorry if I said it incorrectly. I'm not looking at troubleshooting my existing code. I need directions for the idea that I explained. Maybe some code base already exists? Can I animate an element the way I expressed?

[mvaneijgen]

Seems a bit theoretical to me and I'm not 100% sure of what it is you're trying to do. My advise "just do it" and when you get stuck post back here with what you've tried.  A time ago I've written a post how I all ways fall in the trap of optimising my code before it is even working, maybe it helps you to just get started and see what sticks.

 

Working in Codepen is a great place for that, because in it you can just focus on the basics and have something that you can easily share. Hope it helps and happy tweening! 

 

[Rodrigo]

Hi,

 

Just tween the Timescale property of a GSAP instance:

https://gsap.com/docs/v3/GSAP/Tween/timeScale()

 

Something like this (use left-right arrows in your keyboard)

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

 

Hopefully this helps.

Happy Tweening!

[justintime]

2 hours ago, Rodrigo said:

Hi,

 

Just tween the Timescale property of a GSAP instance:

https://gsap.com/docs/v3/GSAP/Tween/timeScale()

 

Thank you Rodrigo. This helps as a starting point.

 

However, I have an added difficulty. In my app, data is loading asynchronously and it adds elements to the train of the ones that are currently animated. How would you simulate this in your codepen? I could not find a way to add elements to an existing tween. So, does it need a timeline and adding a new tween to it? I tried converting your codepen to using a timeline (without even adding new elements), but in this case, it breaks your animation.

When it works, I guess the difficulty is to place the new elements just after the existing one...

 

See the Pen gOJbVZo by cadilhac (@cadilhac) on CodePen

 

 

[Rodrigo]

Hi,

 

I'm not sure I understand what's the exact issue you're having right now, so based on your last post I came up with this:

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

 

That would be my approach to handle async data coming in and increasing the width of the element you're moving left/right.

 

Hopefully this helps.

Happy Tweening!

[justintime]

Thank you. I understand this is not easy to imagine what I need exactly. If I decide to continue on this path, I will have to provide a codepen to start playing with it.

[Rodrigo]

Hi,

 

The main concept in my demo is this:

const createTween = () => {
  t && t.kill();
  t = gsap
    .to(".box", {
      x: () => window.innerWidth - 20 - 75, // paddings & box width
      duration: 5,
      ease: "none"
  })
    .seek(2.5)
    .timeScale(0);
  if (typeof currentProgress !== "undefined") {
    t.progress(currentProgress);
  }
};

Basically you kill  the instance (if is defined) and then, if the progress has been stored, you set the progress of the new instance.  The key in the animation is getting the x value correctly based on the screen width and the width of the element.

 

Hopefully this helps.

Happy Tweening!

[justintime]

My case if of course far more complex, but I never thought about this notion of progress. I will play with this. But note that the difficulty in my case is to add a new sibling after the one that is already animated (appearing with opacity for instance) and make it as such it joins the movement. I'm afraid that whatever solution if found, getting my async data and adding the new DOM node takes time and therefore will have a bad effect on the ongoing animation, making it jerky.

I'm traveling during a few days, so will come back on this in the middle of next week.

Thanks for all.