1

My requirement is when ViewPager click and drag image for next image then previous image should decrease opacity for every drag. This is my codesandbox code.

This image is small example of my requirement.

ViewPager

import React, { useRef } from 'react'
import clamp from 'lodash-es/clamp'
import { useSprings, animated } from 'react-spring'
import { useDrag } from 'react-use-gesture'
import './styles.css'

function Viewpager() {
  const index = useRef(0)

  const [props, set] = useSprings(alphabets.length, i => ({
    x: i * window.innerWidth,
    scale: 1,
    opacity: 1,
    display: 'block'
  }))
  const bind = useDrag(({ active, down, movement: [mx], direction: [xDir], distance, cancel }) => {
    set(i => {
      if (i < index.current - 1 || i > index.current + 1) return { display: 'none' }
      const x = (i - index.current) * window.innerWidth + (down ? mx : 0)
      const scale = down ? 1 - distance / window.innerWidth / 2 : 1
      const opacity = active ? distance * 0.01 : 1
      return { x, scale, opacity, display: 'block' }
    })
  })

  return props.map(({ x, display, scale, opacity }, i) => (
    <animated.div
      {...bind()}
      key={i}
      style={{
        opacity,
        display,
        x
      }}
    />
  ))
}

I need same functionality like codesandbox code and reduce opacity parallely when drag card to other card. If Anyone have any other solution in other library like framer-motion. That is also helpful.

Arpit
  • 1,423
  • 1
  • 17
  • 20

1 Answers1

2

You should interpolate the x value to the opacity. The x value is between 0 and negative innerWitdh / 2. You should transfer it to get a value between 1 to 0.

Here is the working formula.

opacity: x.to(x => 1 + x / (window.innerWidth / 2)),

Here is the example: https://codesandbox.io/s/card-slider-jwf3f

Side Note:

You can check, the formula easily if you display it on screen. All you have to do is put it as the text of an animated.div. For example:

 <animated.div>{x.to(x => 1 - Math.abs(x / (window.innerWidth / 2)))}</animated.div>
Peter Ambruzs
  • 7,763
  • 3
  • 30
  • 36
  • 1. When slide card then circle size should not decrease – Arpit Jun 20 '20 at 11:33
  • 2. when slide to next card then next card's opacity should not decrease – Arpit Jun 20 '20 at 11:35
  • When 2nd Card drag to 1st Card then 2nd card opacity should decrease and 1st card opacity should not decrease, means opacity working good left to right drag but not working right to left drag – Arpit Jun 20 '20 at 16:16