3 ms·

Hey thanks for the pointer. It's definitely a lot smoother using translate. But I'm running into a hiccup on the implementation. The trick is there are actuall

by ruemic 13y ago

Hey thanks for the pointer. It's definitely a lot smoother using translate. But I'm running into a hiccup on the implementation. The trick is there are actually two Norths, they are identical and one is on each end of the background. Once you hit North-2 on the right end, and you want to keep turning to the right, it needs to instantly "skip" you back to North-1. And vice versa. The thing I haven't figured out how to do in a smooth way is to disable the transition, for that split second to allow for the jump. What I've done so far is give each direction a class with the corresponding translate. eg. "go-0, go-1, go-2, go-3, go-4" I've also created two extra classes "go-0-instant" and "go-4-instant" which, set transition duration to 0 and to skips back to North 1 & 2 instantly. But the problem is that i needs to happen quickly, and once I remove the "go-0-instant" class and add the class with enacts the normal rotation, the css gets overridden and the instant translate basically gets overridden. I guess what I'm after is a clean way to do a callback once you know the DOM has picked up on a css class change. I've run into this issue a couple of times before, I would be stoked to learn of the best way to do this! Here's the CoffeeScript file that controls the navigation: https://github.com/webpop/css-pirate-ship/blob/translate3d/public/navigation.coffee https://github.com/webpop/css-pirate-ship/blob/translate3d/p... and the Scss for the cardinal directions: https://github.com/webpop/css-pirate-ship/blob/translate3d/public/pirates.scss#L32 https://github.com/webpop/css-pirate-ship/blob/translate3d/p...

jjellyy 13y ago
Hi, I think the best way to solve for that is with CSS keyframe animations. lets say your on the right side of the background and need to cross over - instantly skip to the left side of the background, and keep moving to the resting spot on the left. @include keyframes(right-left) { from { @include transform( translate3d(-800px, 0px, 0px) ); } 50% { @include transform( translate3d(-1000px, 0px, 0px) ); } 51% { @include transform( translate3d(0px, 0px, 0px) ); } to { @include transform( translate3d(-200px, 0px, 0px) ); } } @include keyframes(left-right) { from { @include transform( translate3d(200px, 0px, 0px) ); } 50% { @include transform( translate3d(0px, 0px, 0px) ); } 51% { @include transform( translate3d(-1000px, 0px, 0px) ); } to { @include transform( translate3d(-800px, 0px, 0px) ); } } Basically whats happening is you animation smoothly for the first half, and then right in the middle you 'reposition' so the second half of the animation starts on the other side. Im not sure if you can do 50, 50.1% but 1% over 1-2s should not be noticeable. If your still getting jitters even with this technique, you could have two copies of the background side by side and put them in a wrapper div, call it .slider. then apply the translate on the .slider to cross over the seam, and when the animation is done instead of letting it rest on the second background you would set it to rest on the first background but in the same spot, you would apply this in the 99%, to portion of the keyframe animation. Basically you can use 50% 51%, 99%,100% technique to shift where the animation is happening and have it look seamless even though you may be adjusting the position significantly. does that make sense ?

by ruemic 13y ago

jjellyy 13y ago

Hi, I think the best way to solve for that is with CSS keyframe animations. lets say your on the right side of the background and need to cross over - instantly skip to the left side of the background, and keep moving to the resting spot on the left. @include keyframes(right-left) { from { @include transform( translate3d(-800px, 0px, 0px) ); } 50% { @include transform( translate3d(-1000px, 0px, 0px) ); } 51% { @include transform( translate3d(0px, 0px, 0px) ); } to { @include transform( translate3d(-200px, 0px, 0px) ); } } @include keyframes(left-right) { from { @include transform( translate3d(200px, 0px, 0px) ); } 50% { @include transform( translate3d(0px, 0px, 0px) ); } 51% { @include transform( translate3d(-1000px, 0px, 0px) ); } to { @include transform( translate3d(-800px, 0px, 0px) ); } } Basically whats happening is you animation smoothly for the first half, and then right in the middle you 'reposition' so the second half of the animation starts on the other side. Im not sure if you can do 50, 50.1% but 1% over 1-2s should not be noticeable. If your still getting jitters even with this technique, you could have two copies of the background side by side and put them in a wrapper div, call it .slider. then apply the translate on the .slider to cross over the seam, and when the animation is done instead of letting it rest on the second background you would set it to rest on the first background but in the same spot, you would apply this in the 99%, to portion of the keyframe animation. Basically you can use 50% 51%, 99%,100% technique to shift where the animation is happening and have it look seamless even though you may be adjusting the position significantly. does that make sense ?