I have a simple Polymer app consisting of two elements. The first, x-app, element has the second element, x-inner, inside its local dom.
Inside the x-inner element I define a keyframe animation that is called spin that I apply on the :host. Inside the x-app I also apply the same animation name, spin, but the keyframe animation is not defined. Although, the spin animation works on both elements. It seems to me that the #keyframe leaks out from the inner element.
Is this the behaviour that is expected? Or do I define the #keyframe animation incorrectly?
Please see my jsbin for an example: jsbin
It is because you are using "Shady" DOM, which doen't really isolate the components CSS styles, as a real Shadow DOM would do.
Try defining shadow instead of shady and it will work.
jsbin example
Related
I'll try and keep it concise.
I am required to utilise the draggable plugin for GSAP in my project. The plugin is great and works really well. I think my issue is just something I'm not quite grasping.
Codepen:
https://codepen.io/mhcdotcom/pen/dzyNmB
Dragging the #stage element allows the click and drag functionality.
The .inner element extends out of the container div so I use overflow:hidden on the stage element.
When I do this, the portion of the .inner elements that extend past the viewable area don't come in to frame and seem to be cut off.
Is there a way around this in GSAP? What am I missing?
I have googled to no avail.
Any help is much appreciated.
Thank you
Moe
"All" draggable does is add a transition to the element that is dragging, so any overflows etc will still be honoured.
I can't be 100% sure what you are trying to achieve, but you can add classes on dragStart/dragEnd that means you should be able to get the behaviour you need.
I have forked a codepen giving you a basic example.
onDragStart: function() {
stage.classList.add('dragging');
},
onDragEnd: function() {
stage.classList.remove('dragging');
}
https://codepen.io/motionimaging/pen/xLxLpG
I m creating a THREE.js (latest version, r71) app, and sometimes I need to manually delete the 3D scene to display classic 2D content. So, what I do is clearing all variables like scene or renderer, and killing the WebGL context using renderer.forceContextLoss()
This method works fine on Firefox or Chrome, but it is not supported on Interner Explorer or Microsoft Edge, which cause multiple lags on my web page. I can't find a workaround to do this properly as I do in Firefox or Chrome.
If someone has a tip, feel free to tell me :)
Thanks
Try using two canvas tags and put one over the other as suggested here,
put them in a parent div tag then use the following css.
position:absolute;
left:0px;
top:0px;
EDIT:
In response to your comment, allow me to clarify my understanding.
You want to draw 2d and 3d.
You are resetting the webGL context.
You can't have 2 contexts to the same canvas simultaneously and I assume you want to use a a different context for your 2d content.
If this assumption is correct:
I am suggesting that you have 2 canvases and contexts simultaneously, one with your webGL context and 3d content, and another with the context you want to use for 2d content. Then you overlay these canvases by using absolute position, such that it looks like there is one canvas.
This means you never have to reload assets to switch contexts, just make sure you so the above canvas is transparent.
Also if you wrap the canvas in a div tag, it will not be at the top left of the page.
But If my assumption is wrong:
perhaps you don't want to use another context and just wish to clear the screen, in which case you should not call forceContextLoss()
If you wish to continue to use the webGL context, but clear the screen you should use clear()
I've been trying to accomplish this for like two weeks now. Does anyone here have any idea of how do this? I won't even paste my code because it's the worst ever.
Thanks.
Have you check fullpage.js?
You might be able to get the same scrolling effect by creating your own CSS3 function with the CSS Easing Animation Tool of Matthew Lein.
Then pass it to the parameter easingcss3 of fullPage.js.
easingcss3: 'cubic-bezier(1.000, 0.000, 0.000, 1.005) 0.5s',
Or, if you prefer, you can go for jQuery easing effects and use css3:false. (although it will be smoother with css3)
Regarding the elements dissappearing on scroll, you'll have to do it by yourself by animating them on a callback such as onLeave or by using the classes added to the body as in this example.
body.fp-viewing-page2-slide1 #section1 .moveOut{
transform: translate3d(0, -400px, 0);
}
Something in this line.
How can I apply slide methods of jQuery to a non-SVG DOM element in d3.js?
Is there something I can use out of the box?
No, there's nothing out of the box, but you can do this by simply animating the relevant dimensional attributes, e.g. slide down would be something like
d3.select("#element").attr("height", 0)
.transition().duration(500).attr("height", realheight);
Depending on what you want to animate, you might have to work with clip paths to hide part of the element as it is being slid in.
You can of course simply use the JQuery methods. There should be no problem with that unless you want to run D3 transitions on the same object at the same time.
I’m trying to create a looping fade in/out effect for an image. It’s working in Chrome, but it doesn’t work in Firefox.
Here’s the code: http://jsfiddle.net/FTLJA/254/
(I did make it work with jQuery but that made the browser slow and flickery on Android phones, so I’m trying CSS instead.)
Thanks for any help.
Update: fixed.. please check the link again
Well, if ypu're only setting the WebKit properties (only #-webkit-keyframes and only -webkit-animation-...), then of course it will work only in WebKit and not in Firefox - add them with -moz prefix as well. Also remove the quotes around 'blink' to leave it just... blink and it works http://jsfiddle.net/FTLJA/261/
Ah yes — this shows a difference between CSS transitions and CSS animations.
CSS animations run once you’ve applied -webkit-animation-name to an element, i.e. they can run entirely from CSS.
Transitions, on the other hand, only run when you change the CSS property that they apply to. You can either do this via CSS pseudo-classes like :hover, or via JavaScript.
So, in order to make your transition work in browsers that don’t support -webkit-animation, you’ll need to run some JavaScript that changes the opacity of the image once a second — setInterval is your friend here.
(Note that your JavaScript won’t carry out the animation, it’ll just switch opacity straight from 1 to 0 and back again every second. The CSS transition will animate this change for you.)