Skip to content

Instantly share code, notes, and snippets.

Avatar

Konstantin koss-lebedev

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.