Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Specify animation for element #42

Open
pfeiffer opened this issue Feb 24, 2019 · 1 comment
Open

Specify animation for element #42

pfeiffer opened this issue Feb 24, 2019 · 1 comment
Labels
enhancement New feature or request

Comments

@pfeiffer
Copy link

pfeiffer commented Feb 24, 2019 •
edited
Loading

Hi,

First of all, thanks for this awesome library!

I'm trying to animate page changes, where a specific element needs a different appear/disappear animation than the rest of the page.

Example markup:

<body>
    <div id="banner">...</div>
    <section id="page">...</page>
</body>

In this example I'd want all content to fadeIn between navigation, except #banner, which should use bounceIn. It seems that this is not possible with the current options.

I've not been able to find a way to achieve easily.

I'm suggesting allowing data-turbolinks-animate-animation to be added to child elements, effectively disabling disabling the parents animation on that element (kind of like persisting at the moment), and instead applying the animation specified by the data attribute, eg:

<body data-turbolinks-animate-animation="fadeIn">
    <div id="banner" data-turbolinks-animate-animation="bounceIn">...</div>
    <section id="page">...</page>
</body>

What do you think?
@jonhue
Copy link
Owner

jonhue commented Feb 24, 2019

Regarding your example, it should be possible to fadein the page section by moving the animation argument from the body element to section#page, right?

Regardless, I like your suggestion of child elements overwriting the propagated animation. Seems intuitive to me. If you have some time to spare, I'd definitely be willing to review a pull request.

@jonhue jonhue added the enhancement New feature or request label Feb 24, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@pfeiffer @jonhue