You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
// You can pass in any object with numbers to tweenconstfrom={x: 0,y: 0,rotation: 0};constto={x: 400,y: 30,rotation: 90};functioncreateAnimation(){newBetween(from,to).time(2000).easing(Between.Easing.Cubic.In).on('update',updateElementTransform).on('start',onStarted).on('complete',onComplete);}functionupdateElementTransform(value){// `value` is same object as from/to but with new valuesconst{ x, y, rotation }=value;element.style.transform=`translate(${x}px, ${y}px) rotate(${rotation}deg)`;}functiononStarted(){state.innerText='state: running';}functiononComplete(){state.innerText='state: complete';}// Get the elements for our visual example and the state indicatorconstelement=document.querySelector('#move');conststate=document.querySelector('[data-state]');// Create the animation in 2 seconds, after the page is fully loadedwindow.onload=()=>setTimeout(createAnimation,2000);
Goal is to offload details at the end where possible.
It should introduce how to work with the API as succinctly as possible.
Using full function syntax allows them to be named and be recognisable. Arrow functions can be really great but experts are often tempted into using them in documentation, which can be hard on beginners to the library.
I introduce these new object values early on (as it is the object example) and the API for Between. It should be easier to see at an overview now.
I use destructuring because it is actually kinda really handy way to set expectations in code and add transparency to contents of an object being passed around.
Using same approach as above, could be used across the examples perhaps?
The text was updated successfully, but these errors were encountered:
@Martin-Pitt So, based on the issue I would highlight the following genral rules that need to be required for examples:
(UPDATED)
Move from & to into variables for examples that use non-numbers
Shorten the width of code, move comments on the new (next/previous) lines
Move window.onload + setTimeout on the separate line
Add more comments explaining the code & API.
I would also argue that I see no need in separating onStarted, onComplete as the pattern of events is very common and used pretty everywhere plus ES6 is a 2 y.o. standard already, but thanks for the suggestion!
There's two issues in the examples that stick out notably:
Taking for example the following code:
An improvement could be:
Goal is to offload details at the end where possible.
It should introduce how to work with the API as succinctly as possible.
Using full function syntax allows them to be named and be recognisable. Arrow functions can be really great but experts are often tempted into using them in documentation, which can be hard on beginners to the library.
I introduce these new object values early on (as it is the object example) and the API for Between. It should be easier to see at an overview now.
I use destructuring because it is actually kinda really handy way to set expectations in code and add transparency to contents of an object being passed around.
Using same approach as above, could be used across the examples perhaps?
The text was updated successfully, but these errors were encountered: