Posts

Showing posts with the label animation

SVG contiues animation out of css (without css)

Image
Clash Royale CLAN TAG #URR8PPP SVG contiues animation out of css (without css) I am just over to learn svg animation with use of java-script. Or just simple svg animation. I would like get push to my animation to make it more simple. If you suggest me svg animation program for linux or simple browser software. Here is my code which I would like to simplify. SVG: <svg width="250" height="250"> <rect x="100" y="-75" width="150" height="150" id="r1" style="fill:red;stroke: rgb(252, 156, 156);stroke-width:10;opacity:0.25; stroke-radius:20;" transform="rotate(45)"></rect> <rect x="100" y="-75" width="125" height="125" id="r2" style="fill:red;stroke: rgb(252, 156, 156);stroke-width:10;opacity:0.25; stroke-radius:20;" transform="rotate(45)"></rect> <rect x="100" y="-75" width=...

GMSMapView resize - strange flicker/blink effect

Image
Clash Royale CLAN TAG #URR8PPP GMSMapView resize - strange flicker/blink effect I have a subview including GMSMapView in my controller - initially it's collapsed and takes just a part of screen - then a user can expand it and see the map in fullscreen mode. The code below works however there is a strange flicker at the end of the animation Here is my code: let screenHeight = screenSize.height let proportionalHeight = (screenSize.width * 46.0 ) / 75.0 mapViewHeight.constant = !isMapFullscreen ? screenHeight : proportionalHeight UIView.animate(withDuration: 1.0, delay: 0, usingSpringWithDamping: 0.9, initialSpringVelocity: 0, options: UIViewAnimationOptions.curveEaseInOut, animations: { self.view.layoutIfNeeded() }, completion: { finished in if finished { self.isMapFullscreen = !self.isMapFullscreen } }) vid...

Can't make square on canvas move, and now the square won't draw either

Image
Clash Royale CLAN TAG #URR8PPP Can't make square on canvas move, and now the square won't draw either I am trying to make an already drawn square move with the WASD keys. I wasn't sure how to do this, so I looked up some code, and after about 2 hours came up with my own non-working code. It wasn't working, but at least it was drawing my square... Or was. Now it isn't, and I have no clue why, here's my JavaScript: function initCanvas(){ var ctx = document.getElementById('my_canvas').getContext('2d'); ctx.addEventListener("keydown", move, true); function move(event){ //W if(event.keyCode == 87){ y = y + 20; } //A else if(event.keyCode == 65){ x = x - 20; } //S else if(event.keyCode == 83){ y = y + 20; } //D else if(event.keyCode == 68...

jQuery: eliminate white screen “pause” between animations

Image
Clash Royale CLAN TAG #URR8PPP jQuery: eliminate white screen “pause” between animations I have just discovered Barba.js and find it very useful. It provides smooth transitions between URLs of the same website. I have put together a Plunker consisting of two pages (index.html and about.html) that are loaded smoothly, with the help of jQuery’s fadeIn() and fadeOut() methods. fadeIn() fadeOut() $(document).ready(function() { var transEffect = Barba.BaseTransition.extend({ start: function() { this.newContainerLoading.then(val => this.fadeInNewcontent($(this.newContainer))); }, fadeInNewcontent: function(nc) { nc.hide(); var _this = this; $(this.oldContainer).fadeOut(1000).promise().done(() => { nc.css('visibility', 'visible'); nc.fadeIn(1000, function() { _this.done(); }); $('html, body').animate({ scrollTop: 300 },1000); }); } }); Barba.Pjax.ge...

Img dropdown issue

Image
Clash Royale CLAN TAG #URR8PPP Img dropdown issue I would like the logo image I have located in the navbar element of my html to slowly dropdown (or even the whole navbar itself), but it won't seem to do anything when i try with JQuery (I am not very familiar with this yet). I am thinking this is due to the fullscreen video I have and some sort of interaction problem with that. Any ideas on how i can make: img src="img/logo.png" dropdown with that slidedown animation, if its even possible at all would be greatly appreciated. Thanks. My Code * { box-sizing: border-box; } .container { max-width: 960px; padding-left: 1rem; padding-right: 1rem; margin: auto; text-align: center; } .v-header { height: 100vh; display: flex; align-items: center; color: #fff; } .fullscreen-video-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; } .fullscreen-video-wrap video { min-height: 100%; min-width: 100%; position...