ramjet
Morph DOM elements from one state to another with smooth animations and transitions
by Rich-HarrisJavaScript
Commit activity
Last 12 weeks · 0 commits
Community health
3 of 6 standards met
57
✓README✓License✓Contributing○Code of Conduct○Issue Template○PR Template
Recent PRs & issues
Quiet · 2 in progress · Last activity 9y ago
See all on GitHub →
The ramjet demo at http://www.rich-harris.co.uk/ramjet/ currently fails on the SVG slide on Chrome (68.0.3440.106/macOS). Here is what it does: !ramjet-chrome-bug
I'm using this lib cssobj, it's creating CSS rules from JS. Is it possible to transform between 2 CSS Rules from JS? will have ramjet transform animation, apply to DOM as needed. I'm checked the and , it is possible? Maybe it's need a new lib to doing this? Thank you!
Hi, I'm using vue-overdrive, but under the hood it uses your ramjet. So maybe you can help me ;) I have done a screencast to demonstrate the problem. As you can see in the video, if I click an image it fades everything out and then beginns to fade in the image again. I have done also a small sandbox example In vue-overdrive the ramjet magic happens there ramjet.hide(clone) ramjet.hide(this.$el.firstChild) ramjet.transform(clone, this.$el.firstChild, opts) I have allready tried out to set the opacity manually this.$el.firstChild.style.opacity = 1 clone.opacity = 1 This is the whole file I've seen that on the elements the style opacity: 1 is set, but I do not put this by myself, maybe it has something to do with that behavior? !image I have updated ramjet from 0.5.0 to 0.6.0-alpha, because I have seen that there are some updates about opacity. Do you think that's more a vuejs/vue-overdrive problem or more related to ramjet?
Recent fixes
Hi, what is the current status of this project? Is it still actively maintained?
Howdy! First and foremost, thanks for building + maintaining this library! It's been an invaluable asset to my open-source lib, https://github.com/mattrothenberg/vue-overdrive. In upgrading to , I noticed (what I think is) a regression around percentage-based radii. Simply put, if one of the nodes passed to the function has a border-radius with a percentage in it, ramjet barfs with the following error. Upon closer inspection, it seems like the following line might be the culprit. https://github.com/Rich-Harris/ramjet/blob/master/src/utils/parseBorderRadius.js#L1 I figured you might have better context than myself as to what might have changed between versions. I've set up a Codepen that reproduces the error. Demo: https://streamable.com/sphja Link: https://codepen.io/mattrothenberg/pen/MZbdNx?editors=0111 ❤️
I would like to ignore when using ramjet, is this possible? The reason is that i am fading in the target element when ramjet is triggered, because of this, ramjet correctly transitions the position to the correct place, but the opacity to . Does that make sense?
Structured data for AI agents
Repository: Rich-Harris/ramjet. Description: Morph DOM elements from one state to another with smooth animations and transitions Stars: 5438, Forks: 158. Primary language: JavaScript. Languages: JavaScript (77%), HTML (19.9%), CSS (2.2%), Shell (1%). License: MIT. Homepage: http://www.rich-harris.co.uk/ramjet/ Topics: animation, css, dom, effects, fx, transitions. Open PRs: 2, open issues: 8. Last activity: 9y ago. Community health: 57%. Top contributors: Rich-Harris, sithmel, Calinou, chrisheinzelmann, DDKnoll, kennyt, prayagverma, TimothyGu, electerious, afc163 and others.