Skip to content

Instantly share code, notes, and snippets.

Konstantin koss-lebedev

Block or report user

Report or block koss-lebedev

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View App.tsx
import React from "react"
import { useSpring, animated } from "react-spring"
const App = () => {
const [isExpanded, setExpanded] = React.useState(false);
const ref = React.useRef<HTMLDivElement>(null);
const style = useSpring({
width: isExpanded ? vwToPixel(100) : "200px",
height: isExpanded ? vhToPixel(100) : "200px",
View spring-using-utils.tsx
const style = useSpring({
width: isExpanded ? vwToPixel(100) : "200px",
height: isExpanded ? vhToPixel(100) : "200px",
borderRadius: isExpanded ? "0px" : "10px",
})
View App.tsx
import React from "react"
import { useSpring, animated } from "react-spring"
const App = () => {
const [isExpanded, setExpanded] = React.useState(false);
const style = useSpring({
width: isExpanded ? "100vw" : "200px",
height: isExpanded ? "100vh" : "200px",
borderRadius: isExpanded ? "0px" : "10px",
View utils.js
const vhToPixel = value => `${(window.innerHeight * value) / 100}px`
const vwToPixel = value => `${(window.innerWidth * value) / 100}px`
View component-6.tsx
const bind = useScroll(event => {
set({
transform: `perspective(500px) rotateY(${
event.scrolling ? clamp(event.delta[0]) : 0
}deg)`
});
});
View component-5.tsx
import { useScroll } from "react-use-gesture";
const App = () => {
const [style, set] = useSpring(() => ({
transform: "perspective(500px) rotateY(0deg)"
}));
const bind = useScroll(event => {
set({
transform: `perspective(500px) rotateY(${
View component-4.tsx
const [style, set] = useSpring(() => ({
transform: "perspective(500px) rotateY(0deg)"
}));
View styles-2.scss
.container {
display: flex;
overflow-x: scroll;
width: 100%;
padding: 20px 0;
}
View component-3.tsx
const style = useSpring({
from: {
transform: "perspective(500px) rotateY(0deg)"
},
transform: "perspective(500px) rotateY(25deg)"
});
View component-2.tsx
import { animated, useSpring } from "react-spring";
const App = () => {
const style = useSpring({
from: {
transform: "rotateY(0deg)"
},
transform: "rotateY(25deg)"
});
You can’t perform that action at this time.