core: swipe and fade animation 60fps with requestAnimationFrame

[peterpeterparker]

Affected part of DeckDeckGo

• Web Components

Feature Description

Our core components takes care of displaying the slides. The transition happening when switching slides can happens either instantly or with an animation.

This animation can either be swipe or fade.

In both cases, CSS variables are set though Javascript to apply the effects but none of these are implement with requestAnimationFrame which would enhance the quality and the smoothness of the animation to achieve 60 fps.

Use Case

I would be smoother

Getting started

git clone https://github.com/deckgo/deckdeckgo
cd deckdeckgo/core
npm i
npm run start

The animation can be set with a related attribute / property on the deckgo-deck element.

To try it out, you can modify your local deckdeckgo/core/src/index.html such as

<deckgo-deck animation="swipe">

or

<deckgo-deck animation="fade">

Code

The swipe effect finds place in the core

The fade effect happens with a Functional component so to be honest, there I am not sure how to achieve this goal. Looking forward to your inputs.

Get Started

If you need help to get started with this feature, I'll be happy to help.

Ping me: @peterpeterparker | twitter | email | slack

[harshith-venkatesh]

Hi @peterpeterparker , This looks really interesting, I would love to explore more and contribute on the same :)

[peterpeterparker]

Sure super got for it @Harshi7016 thx!

[peterpeterparker]

@Harshi7016 are you working on that one or should I un-assign you the issue?

[harshith-venkatesh]

Hi @peterpeterparker , Shall I update you about my progress in 3 days, I am extremely sorry , I got struck in other prs and forgot to update...
Extremely sorry for this delay
If you are ok I will be updating you soon
Sorry again

[peterpeterparker]

no worries about delay @Harshi7016, there is no rush. I was interesting about the status to get to know if someone should take over or not, so all cool. Ping me when you've got time, thx.