Skip to content

Commit

Permalink
chore: add missing setScrollPercent for Vue and Svelte (#99)
Browse files Browse the repository at this point in the history
* chore: add missing exports of setScrollPercent for svelte and vue

* docs: update readme
  • Loading branch information
tarsisexistence authored Apr 4, 2024
1 parent 7f0142c commit a3cb753
Show file tree
Hide file tree
Showing 3 changed files with 28 additions and 6 deletions.
24 changes: 19 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -87,13 +87,27 @@ Add html code to your html component:
| videoPercentage | Manually specify the position of the video between 0..1, only used for react, vue, and svelte components | Number | |
| debug | Whether to log debug information | Boolean | false |

Additionally, to set currentTime manually:

***setTargetTimePercent*** (`percentage: number`, `options: Options`): Pass a progress in between of 0 and 1 that specifies the percentage position of the video. Optionally, to customise experience of separate `setTargetTimePercent` calls you can utilize options:
- `transitionSpeed`: `number`
- `easing`: `(progress: number) => number`
## Additional callbacks

***setTargetTimePercent***

Description: A way to set currentTime manually. Pass a progress in between of 0 and 1 that specifies the percentage position of the video.

Signature: `(percentage: number, options: { transitionSpeed: number, (progress: number) => number }) => void`

Example: `scrollyVideo.setTargetTimePercent(0.5, { transitionSpeed: 12, easing: d3.easeLinear })`

<br/>

***setScrollPercent***

Description: A way to set video currentTime manually based on `trackScroll` i.e. pass a progress in between of 0 and 1 that specifies the percentage position of the video and it will scroll smoothly. Make sure to have `trackScroll` enabled.

Signature: `(percentage: number) => void`

Example: `scrollyVideo.setScrollPercent(0.5)`

Example: `setTargetTimePercent(0.5, { transitionSpeed: 12, easing: d3.easeLinear })`

## Technical Details and Cross Browser Differences
To make this library perform optimally in all browsers, three different approaches are taken to animating the video.
Expand Down
5 changes: 5 additions & 0 deletions src/ScrollyVideo.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,11 @@
scrollyVideo.setTargetTimePercent(...args);
}
// export setScrollPercent for use in implementations
export function setScrollPercent(...args) {
scrollyVideo.setScrollPercent(...args);
}
// Cleanup the component on destroy
onDestroy(() => {
if (scrollyVideo && scrollyVideo.destroy) scrollyVideo.destroy();
Expand Down
5 changes: 4 additions & 1 deletion src/ScrollyVideo.vue
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,10 @@ export default {
},
setTargetTimePercent(...args) {
if (this.scrollyVideo) this.scrollyVideo.setTargetTimePercent(...args);
}
},
setScrollPercent(...args) {
if (this.scrollyVideo) this.scrollyVideo.setScrollPercent(...args);
},
},
watch: {
$attrs: {
Expand Down

0 comments on commit a3cb753

Please sign in to comment.