pedrobern / react-tiger-transition

Full page transitions with react-router.

react-tiger-transition

Page transitions for react router dom. Animate your routes programmatically during navigation. Instead of defining the animation inside <Route />, this module defines inside <Link />, allowing to easily reach and leave the same url with different transitions.

---

Documentation

• Documentation and Demo

Features

• Create dynamic transitions on the fly.
• No need to load a bunch of CSS!
• Zero dependencies.
• 20+ built-in transitions (the tigers).
• Minimum configuration.
• Fully customizable (raise your own tigers!).
• Built with react-transition-group and react-router-dom.
• Inspired by react-router-transition and this transitions collection.

Installation

npm i react-tiger-transition

You need to install peerDependencies:

npm i react-router-dom react-transition-group

Contributing

See CONTRIBUTING.

react-tiger-transition's Issues

Error: TypeError: Cannot read property 'setTransition' of undefined

Error: TypeError: Cannot read property 'setTransition' of undefined

Stacktrace: in TigerLink (created by Component) in Component (created by Context.Consumer) in withRouter() (created by withRouterAndRef(TigerLink)) in withRouterAndRef(TigerLink) (created by LayoutMenuForBrowser) in div
 (created by Styled(MuiBox)) in Styled(MuiBox) 
(created by LayoutMenuForBrowser) in LayoutMenuForBrowser (created by Menu) in HiddenJs (created by WithWidth(HiddenJs)) in WithWidth(HiddenJs) (created by Hidden) in Hidden (created by Menu) in Menu (created by SiteLayout) in div (created by Styled(MuiBox)) in Styled(MuiBox) (created by SiteLayout) in div (created by Styled(MuiBox)) in Styled(MuiBox) (created by SiteLayout) in header (created by ForwardRef(Paper)) in ForwardRef(Paper) 
(created by WithStyles(ForwardRef(Paper))) in WithStyles(ForwardRef(Paper)) 
(created by ForwardRef(AppBar)) in ForwardRef(AppBar) 
(created by WithStyles(ForwardRef(AppBar))) in WithStyles(ForwardRef(AppBar)) 
(created by SiteLayout) in section (created by 
ForwardRef(Container)) in ForwardRef(Container) 
(created by WithStyles(ForwardRef(Container))) in WithStyles(ForwardRef(Container)) 
(created by SiteLayout) in SiteLayout (created by Context.Consumer) in Route (created by RouteWithLayout) in Suspense (created by RouteWithLayout) in RouteWithLayout (created by Router) in Switch (created by Router) in ReactRouterGA (created by Context.Consumer) in withRouter(ReactRouterGA) (created by Router) in Router 
(created by HashRouter) in HashRouter (created by Router) in Router in Unknown in StylesProvider in ThemeProvider
 (created by Theme) in Theme in Provider in ErrorBoundary (created by Error) in Error in AppContainer

Code

import React from "react"
import * as Icons from "@material-ui/icons"
import { Choose, When, Otherwise } from "jsx-control-statements"
import { makeStyles } from "@material-ui/core/styles"
import { Box, Typography } from "@material-ui/core"

import { useTheme } from "@material-ui/core/styles"
import useMediaQuery from "@material-ui/core/useMediaQuery"
import { Link, glide } from "react-tiger-transition"

import "react-tiger-transition/styles/main.min.css"

import { center } from "theme"

import { getSize } from "./index"
import DropdownMenu from "./dropdown"

glide({
  name: "glide-right",
  direction: "right",
})

const useStyles = makeStyles({
  alignLinks: {
    ...center,
  },
  item: {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
  },
})

export default function LayoutMenuForBrowser({ links, onClick, }) {
  const classes = useStyles()
  const theme = useTheme()
  const small = useMediaQuery(theme.breakpoints.down("sm"))
  const header = getSize(small)
  return (
    <>
      {links.map(({ url, title, icon, links, }, index) => {
        const Icon = icon ? Icons[icon] : null
        const showIcon = Icon && !small

        return (
          <Box key={`${title}${index}`} color="primary" display="flex" justifyContent="center" alignItems="space-evenly" m={1} p={1}>
            <Choose>
              <When condition={links}>
                <DropdownMenu title={title} links={links} />
              </When>
              <Otherwise>
                <Link transition="glide-right" to={url}>
                  {showIcon ? <Icon /> : null}
                  <Typography variant={header} className={classes.alignLinks}>&nbsp;{title}</Typography>
                </Link>
              </Otherwise>
            </Choose>
          </Box>
        )
      })}
    </>
  )
}

Could not find a declaration file for module 'react-tiger-transition'.

When I'm importing the react-tiger-transition I get a comment from VS code:

Could not find a declaration file for module 'react-tiger-transition'. '/Users/.../.../.../.../node_modules/react-tiger-transition/index.js' implicitly has an 'any' type. Try npm install @types/react-tiger-transitionif it exists or add a new declaration (.d.ts) file containingdeclare module 'react-tiger-transition';ts(7016)

What does this mean? Is this an error?

Support for React 17?

Any plans on supporting React v17 in the near future?

Possible to use this lib for non route transitions?

Firstly, thank you for this really amazing pice of code, it's been really easy to learn and for someone like me whose deathly novice with animations, kind of nice to learn how to use some of them.

I am stuck however, in wanting to add an animation similair to this on a list on one of my pages.
Codepen

I have a cart thats managed in redux, and each list item is wrapped in a CSSTransition (similair to the link I shared, except i've wrapped my components in

<CSSTransition
      mountOnEnter
      unmountOnExit
      in={quantity > 0}
      timeout={800}
      classNames="slide-bottom"
    >
    <Grid>{item.name}</Grid>
</CSSTransition>

My idea was that on reducing an items quantity to 0, it must slide out and then be removed from the DOM.

I think my one potential problem is that I'm removing the item from the redux store collection, thus not giving the animation time to complete... but I'm unsure if thats the cause, or if I'm potentially trying to use tiger transitions for something not suited for it.

Any help or advice would be greatly appreciated.

Unfortunately does not work with latest version of react-router-dom

The latest version of react-router-dom has dropped some hooks like withRouter which breaks this library.
It's unfortunate.

Tiger transitions persisting across non-tiger routes

Hello,

Let's say I have four pages. The first page has two tabs, clicking on the second tab would do a history.push(url) and take you to the third page. Clicking a link in the third page would set the tiger transition with glide-top. Only the third page has the transition.

Now, any page transition has the glide-top tiger transition, even if they do not have any transitions set. This means that even the tabs on the first page doing a history.push also perform the same transitions.

Is this intentional behaviour? If so, how can I disable it?

Thank you

Transitions are not iOS Safari or Chrome mobile-friendly

On my iphone running iOS 14.2, in Safari and Chrome browsers, I visit apple.com (or any other mobile-friendly site). When I scroll down, the address bar shrinks upwards and the bottom navigation bar shrinks downwards giving more of the screen to the website.

Open your demo https://pedrobern.github.io/react-tiger-transition/examples/basic in Safari or Chrome. Scrolling down does not cause the browser's address bar or bottom navigation bars to shrink away. Instead they remain. Also, the lower navigation bar is on top of the bottom of the website's page. If you there was a commit button here, it's unreachable.

After a minor investigation, the tiger transitions are swallowing the scroll events.

Is there any way to make the transitions mobile-friendly?

No declaration file for Typescript

please support Typescript!

Link history to trigger transition

I have a link that triggers a transition when the user clicks it:
<Link to='/menu' transition='glideOut-right' className={classes.backLink}> <ArrowBackIcon /></Link>

I want to manually trigger this. I thought of using this method:
import { withRouter } from "react-router-dom"; props.history.push("/menu");

The history method does not let me specify the transition type. It does trigger the page to transition when called, but the 'glideOut-right' type is not used and the screen flickers once the transition has ended.

Is there a preferred way to programmatically trigger my link?

[Security] Workflow stale.yml is using vulnerable action actions/stale

The workflow stale.yml is referencing action actions/stale using references v1. However this reference is missing the commit af4072615903a8b031f986d25b1ae3bf45ec44d4 which may contain fix to the some vulnerability.
The vulnerability fix that is missing by actions version could be related to:
(1) CVE fix
(2) upgrade of vulnerable dependency
(3) fix to secret leak and others.
Please consider to update the reference to the action.

auth0-sdk.js PrivateRoute redirect issue

Hey,

We are working with a auth0-sdk.js (https://auth0.com/docs/quickstart/spa/react/01-login) and your librabry. We would like to bring them together.

The issue we are facing is how you declare the compared to . When we use react-router-dom Switch all is good, routes, private routes can be declared properly! When change to the app always want to redirect me back to the login page even if I started with a which is a public route. Thing is, the auth0-sdk.js PrivateRoute component detects the PrivateRoute even if the path in the browser is a public route.

Does react-tiger-transition support Programatic navigation?

Hello There,

Thank you for providing an awesome library to handle the transitions in react router, this will save many in implementing better user experience at the ease.

I been trying to achieve transition after an api call, ex: slide-left the user to a protected screen after login api call success, was wondering if there is a way to programatically achieve that?

Thanks

Set transition programmatically for history push

Any way to set page transition on history.push ?

window.scrollY is always zero with page transitions integrated

I attached a scroll listener to my page via:

useEffect(() => {
	window.addEventListener('scroll', windowScrollHandler, true)

	return function cleanup() {
		window.removeEventListener('scroll', windowScrollHandler)
	}
}, [windowScrollHandler])


const windowScrollHandler = (e) => {
	// window.scrollY is always zero with the new page transitions!
	const scroll = window.scrollY
}

Before adding the tiger transitions, window.scrollY reflected the page's Y position.
But after adding the tiger transitions, window.scrollY is always zero.

Has anyone seen this? Is there a workaround in the tiger CSS to restore the scrollY value?

Support Legacy React 15?

Hello,

Our app is stuck on an older version of React, 15.6.2 to be exact. At this point we can't upgrade the React version since a lot of things will break that were built on the older version and the respective dependency packages.

Any idea if there is way to use the react-tiger-transition with that react version?

These are the exact versions:

We tried to downgrade react-tiger-transition's codepen to the above versions and got the following error:

But that's because these versions are the latest and won't play nicely with the legacy ones above:

Any idea if there are specific versions that would work with the react version above? We'd really love to improve our UX with some transitions, so we're really hoping there would be a way.