rich-harris / ramjet Goto Github PK
View Code? Open in Web Editor NEWMorph DOM elements from one state to another with smooth animations and transitions
Home Page: http://www.rich-harris.co.uk/ramjet/
License: MIT License
Morph DOM elements from one state to another with smooth animations and transitions
Home Page: http://www.rich-harris.co.uk/ramjet/
License: MIT License
Hi, what is the current status of this project? Is it still actively maintained?
TypeError: Argument 1 of Window.getComputedStyle is not an object.
Something to do with SVG elements not having an offset parent...
I'm using this lib cssobj, it's creating CSS rules from JS.
Is it possible to transform between 2 CSS Rules from JS?
// class in JS using cssobj
'.class1': {
backgroundColor: 'red',
fontSize: '4em',
padding: '1em'
}
'.class2':{
backgroundColor: 'blue',
fontSize: '4em',
padding: '1em'
}
......
var newClass = ramjet.transform('.class1', '.class2')
newClass
will have ramjet transform animation, apply to DOM as needed.
I'm checked the src/utils
and src/interpolators
, it is possible? Maybe it's need a new lib to doing this?
Thank you!
Using ramjet with the target node having a fixed, rather than inherited, offset I get the following error.
Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
wrapNode @ ramjet.js:89
ramjet.transform @ ramjet.js:399
The offending line being #88.
Since the target node in my case is absolutely positioned to fill the entire screen I can simply fix it for myself using: var offsetParent = node.offsetParent || document.body;
, but this is obviously not a good general solution.
Small rant sorry...
You should mention somewhere that elements have to be hidden first then do ramjet.transform()
, and use { done: => { ramjet.show(target) }}
... and also maybe that it doesnt like jquery elements.
If the docs do say that, my apologies, I couldn't find it
Reason is all your demos use hidden elements, but its not clear how to interact with a hidden element, and the effect doesnt work at all with hidden elements..
I originally tried to setup a fiddle with jquery and ramjet and it didnt work at all, then I tried to use a hidden element as a target transition and it didnt work, so I tried all the variations of methods to hide an element, display:none, visibility:hidden, jquery hide, etc.
anyway after 30 minutes i got this: https://jsfiddle.net/davwcwmr/ cool!
IE9 supports CSS transforms, but requires an -ms-
prefix
[feature request]
Would be awesome to have an angular directive which incorporates ramjet into angular-ui-router's ui-view s.t. state transitions could optionally include morphing.
Occur when i try to run
ramjet.transform( a, b );
Hi,
I wonder if it could be possible to morph two elements in two steps instead of one.
...Explanation :
I'm making a transition between two pages. Lets say the first one is a listing of blog articles and the other is the blog article itself. I want the smaller version of an article (in the listing) to transition into the full version of the article (in the single article page). But because the second one is on a different page, the layouts differs. I can only have either the smaller article OR the full article in the DOM at the same time. Therefore I can't transition between the two elements because the state of the elements are recorded at the same time.
What I would need is :
Achieving this would be incredibly awesome to me, is it hard to implement ? :)
...because we're using position: fixed
(for the main SVG element). Should probably invalidate-and-recalculate on scroll events for those cases.
Would be convenient to say:
ramjet.transform( $('#a'), $('#b') );
instead of currently having to verbosely convert jquery elements to their corresponding dom elements:
ramjet.transform( $('#a').get(0), $('#b').get(0) );
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:
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?
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?
I'm getting this bug in my own code but you can also see it happening in the multicolour-number-grid demo (at http://www.rich-harris.co.uk/ramjet/ under More Examples).
To reproduce: Visit that page on an iPhone 5 (and maybe other devices, I haven't tested). Tap one of the items. It animates smoothly, but then when it's finished, and the big photo is at its full size, it waits a moment then the big photo disappears and reappears. It's gone for about 0.5 seconds (it's very noticeable).
I'm guessing the tempoary disappearance is due to Ramjet removing the toNode
clone before firing the 'done' callback that unhides the real toNode
. But it's weird that there would be such a big gap of time; maybe there's something else going on?
If either element has an opacity other than 100% when a transformation starts, ramjet ignores it, leading to visual glitches:
I would like to ignore opacity
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 0
. Does that make sense?
Hi @Rich-Harris,
Would it be possible to create a ramjet that can rely entirely on the web animations api? It would be great to be able to make ramjets of different elements and composite them into one big animation, e.g:
var anim = new AnimationSequence([
ramjet.transform(document.querySelector('button.nav.active'), document.querySelector('header.page')),
new Animation(document.querySelector('img.avatar'), [ { transform: 'translateX(300px) rotate(30deg) translateX(-400px) } ])
], { duration: 500, fill: 'forwards' });
var player = document.timeline.play(anim);
player.play();
The Web Animations API polyfill is used by Polymer for example and works really well, providing cross-browser support.
https://github.com/web-animations/web-animations-js
Here I was able to reproduce the issue without position:relative
:
http://codepen.io/anon/pen/zGQxBJ
Then I saw your jsfiddle and I was only able to reproduce the bug with position:relative
http://jsfiddle.net/ckmpv5gd/
On my current site I'm using position:absolute
on one of the elements and have the same issue.
The issue should be on these lines: https://github.com/Rich-Harris/ramjet/blob/master/src/utils/node.js#L59-L60
In Firefox for Android I every now an then get some pretty horrible artifact in the demo at the top of the Ramjet homepage.
The best description I can give is that the previous elements appears to do some kind of ghosting were it's not hidden properly.
Hey! I don't see any docs on how to run the demo... I tried running a local webserver and serving it, and that didn't work. Then I noticed there was a gooblefile there, so I installed gobble and tried running gobble, and that failed after installing a bunch of stuff with the following:
$ gobble
gobble: server listening on port 4567
gobble: livereload server running
gobble: 03-merge done in 84ms
%cRactive.js %c0.7.3 %cin debug mode, %cmore... color: rgb(114, 157, 52); font-weight: normal; color: rgb(85, 85, 85); font-weight: normal; color: rgb(85, 85, 85); font-weight: normal; color: rgb(82, 140, 224); font-weight: normal; text-decoration: underline;
You're running Ractive 0.7.3 in debug mode - messages will be printed to the console to help you fix problems and optimise your application.
To disable debug mode, add this line at the start of your app:
Ractive.DEBUG = false;
To disable debug mode when your app is minified, add this snippet:
Ractive.DEBUG = /unminified/.test(function(){/*unminified*/});
Get help and support:
http://docs.ractivejs.org
http://stackoverflow.com/questions/tagged/ractivejs
http://groups.google.com/forum/#!forum/ractive-js
http://twitter.com/ractivejs
Found a bug? Raise an issue:
https://github.com/ractivejs/ractive/issues
%cRactive.js: %cInline partial comments are deprecated.
Use this...
{{#partial const}} ... {{/partial}}
...instead of this:
<!-- {{>const}} --> ... <!-- {{/const}} -->' color: rgb(114, 157, 52); color: rgb(85, 85, 85);
gobble: 04-ractive done in 226ms
gobble: 05-babel done in 2602ms
gobble: 06-esperantoBundle done in 341ms
gobble: 07-derequire done in 332ms
∙∙∙∙∙∙◦ 08-browserify running...
gobble: 08-browserify transformation failed
input: /Users/bparks/gitrepos/ramjet_morph_dom_elements/.gobble/07
Error: Cannot find module 'ractive' from '/Users/bparks/gitrepos/ramjet_morph_dom_elements/.gobble/07-derequire/1'
at /Users/bparks/gitrepos/ramjet_morph_dom_elements/node_modules/gobble-browserify/node_modules/browserify/node_modules/resolve/lib/async.js:46:17
at process (/Users/bparks/gitrepos/ramjet_morph_dom_elements/node_modules/gobble-browserify/node_modules/browserify/node_modules/resolve/lib/async.js:173:43)
at ondir (/Users/bparks/gitrepos/ramjet_morph_dom_elements/node_modules/gobble-browserify/node_modules/browserify/node_modules/resolve/lib/async.js:188:17)
at load (/Users/bparks/gitrepos/ramjet_morph_dom_elements/node_modules/gobble-browserify/node_modules/browserify/node_modules/resolve/lib/async.js:69:43)
at onex (/Users/b
Any chance this will work with certain CSS transformations like rotate, i.e.:
#a{
...
}
#b{
...
transform: rotate(90deg);
}
Also, rotating twice from beginning to end on something like
#b{
...
transform: rotate(720deg);
}
would be super cool!
I have no idea what a good strategy for testing a library like this looks like...
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 0.6.0-alpha
, I noticed (what I think is) a regression around percentage-based radii. Simply put, if one of the nodes passed to the transform
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
var borderRadiusRegex = /^(\d+)px(?: (\d+)px)?$/;
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
❤️
Hi,
I have a transition problem in Chrome browser.
This is how it should look like and it is working in Safari, Firefox and IE11:
http://www.gfycat.com/EachFabulousAfricanpiedkingfisher
But in Chrome browser only I am getting this:
http://www.gfycat.com/ElasticHelpfulDoe
At the moment it is difficult to provide sample code because it is a huge intranet application but somebody might have an idea anyway?
Thanks!
If you're transitioning from/to an element with overflow:auto/scroll, and which the user has already scrolled before ramjetting, this causes an ugly jump at the beginning/end of the transition, breaking the illusion.
It's also possible that it's not the outer element but some descendent that is scrollable... So to fix this properly you'd need to walk through all descendent elements and copy over the scrollTop for each one (if it's not 0). Not sure how feasible that is.
Sigh... I thought that IE11 at least might not be terrible. FFS. There's a noticeable flicker at the end of each transition - somehow it's getting the timing all messed up, and the callback is executing at the wrong moment. It's almost as if the people who make IE are rubbish at their jobs or something.
Hey! I was wondering if the done
function should pass the a,b
values that transform
receives as arguments?
e.g.
options.done = function(a,b)
{
console.log(a,b);
}
Sure this could be bound using .bind
, but why the extra work if it can be passed in? Thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.