Skip to content

Fix animated ElasticHeader demo #2282

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.

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

Merged
merged 1 commit into from
Mar 11, 2023

Conversation

skirtles-code
Copy link
Contributor

@skirtles-code skirtles-code commented Mar 11, 2023

The ElasticHeader demo is supposed to ping back when the drag ends, but currently it just freezes in place.

This bug was introduced by a recent change to remove Reactivity Transforms, 1bc0434.

Specifically, the problem is on line 44/45, where the first argument passed to dynamics.animate needs to be a reactive object. The animation is driven by changing that object, so passing a throwaway wrapper object doesn't work.

I reverted the code back to the Reactivity Transforms version and then changed $ref to reactive.

Fixed demo: https://deploy-preview-2282--vuejs.netlify.app/guide/extras/animation.html#state-driven-animations

@netlify
Copy link

netlify bot commented Mar 11, 2023

Deploy Preview for vuejs ready!

Name Link
🔨 Latest commit c014888
🔍 Latest deploy log https://app.netlify.com/sites/vuejs/deploys/640c444f522d6d0008a81416
😎 Deploy Preview https://deploy-preview-2282--vuejs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@bencodezen
Copy link
Member

Fantastic investigation into this and fixing it @skirtles-code!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants