background preloader

Velocity.js

Velocity.js
Related:  Saved Tech

The Next Generation of 3D Tiles Nearly two years ago, we announced the 3D Tiles initiative for streaming massive heterogeneous 3D geospatial datasets. It is amazing and humbling to see how much of it has come to fruition and how a vibrant community has formed around 3D Tiles. With this initial success, we now have the foundation for modern 3D geospatial: Cesium as the canvas, 3D Tiles as the conduit, and the seemingly endless stream of geospatial data as the supply. The data acquisition trends are clear: we are collecting more data, more frequently, at a higher resolution and lower cost than ever before, and the data is inherently 3D, driven by heterogeneous sources such as photogrammetry and LIDAR. The challenge now is to realize the full value of these data. With your help, of course! We are looking for input on the next generation of 3D Tiles: 3D Tiles Next. Our vision includes A truly 3D vector tile for heterogeneous classification Business corridors vector tileset clamped to a city photogrammetry tileset.

Lottie In the past, building complex animations for Android, iOS, and React Native apps was a difficult and lengthy process. You either had to add bulky image files for each screen size or write a thousand lines of brittle, hard-to-maintain code. Because of this, most apps weren’t using animation — despite it being a powerful tool for communicating ideas and creating compelling user experiences. Today, we’re happy to introduce our solution. Lottie allows engineers to build richer animations without the painstaking overhead of re-writing them. Our goal is to support as many After Effects features as we possibly can, to allow for a lot more than simple icon animations. We’ve already started shipping our own Lottie animations on several screens, including in-app notifications, full-frame animated illustrations, and in our review flow. Flexible and efficient solution Lottie also has several features built into its API to make it more versatile and efficient. Building community

D3.js - Data-Driven Documents Creating Vue.js Transitions & Animations In a rush? Skip to tutorial & live demo. My last two projects hurled me into the JAMstack. SPAs, headless content management, static generation... you name it. More importantly, they gave me the opportunity to learn Vue.js. These two apps were my last projects for Spektrum. We decided I'd start by sharing what I've learned working with Vue. Part 1? I've prepared live demos on CodePen, code snippets, and an open source GitHub repo for you guys. So let's get into it! Vue.js "transformations"—context Disclaimer: this post digs into Vue.js and the tools it offers with its transition system. Animations & transitions. Even for those of us who are drawn to the field by an urge to create intricate micro-interactions and smooth page transitions, it quickly becomes difficult to reason about our work, given the need to rely on CSS for performance purposes. This is where frameworks like Vue.js step in, taking the guess-work and clumsy chains of setTimeout functions out of transitions. 1. 1.1 Lists 2.

Move.js - CSS3 animation framework for JavaScript Move.js is a small JavaScript library making CSS3 backed animation extremely simple and elegant. Move#set(prop, val) Set prop to val. Play move('#example-1 .box') .set('margin-left', 200) .end(); Move#add(prop, val) Increment prop by val, where val is an Number (click several times). move('#example-2 .box') .add('margin-left', 200) .end(); Move#sub(prop, val) Decrement prop by val, where val is an Number (click several times). move('#example-3 .box') .sub('margin-left', 100) .end(); Move#rotate(deg) Rotate by deg. move('#example-4 .box') .rotate(140) .end(); Move#duration(n) Set animation duration to n which is a Number or a string such as "4s". move('#example-5 .box') .set('background-color', 'blue') .duration('2s') .end(); Move#translate(x[, y]) Translate x and optionally y axis. move('#example-6 .box') .translate(300, 80) .end(); Move#x(n) / Move#y(n) Translate x or y axis. move('#example-7 .box') .x(300) .y(20) .end(); Move#skew(x[, y]) Skew x, and optionally y. Move#scale(x[, y]) Move#ease(fn) default in

Polymaps drcmda/react-spring: ✌️ A spring physics based React animation library Zoom sur l'effet parallaxe Après avoir abordé les arrière-plans extensibles (full background) nous allons continuer avec l'effet parallaxe. Cet effet graphique étant facile à comprendre et à mettre en place, vous allez pouvoir créer rapidement un site original. Ce tutoriel va utiliser jQuery ainsi que le plug-in jQuery-Parallax. Qu'est-ce que l'effet parallaxe ? Il s'agit d'un terme générique correspondant au déplacement de plusieurs éléments sur des couches et à des vitesses différentes. Au scroll (défilement de la vue) ou en fonction des coordonnées de la souris, les positions des différents fonds (ou éléments à animer) vont changer, ce qui va générer un effet de profondeur. Des exemples Utilisant le positionnement de la souris digitalhands.net bikingboss.com Utilisant le niveau du scroll nikebetterworld.com ok-studios.de driver-club Principe et théorie Grâce à l'utilisation de JavaScript, il est possible de déplacer les éléments par rapport à la position de la souris ou du niveau de défilement (scroll). En pratique

Adding Transition Effects - vue.js With Vue.js’ transition hooks you can apply automatic transition effects when elements are inserted into or removed from the DOM. There are three options to implement transitions with Vue.js: CSS transitions, CSS animations, and JavaScript functions. All Vue.js transitions are triggered only if the DOM manipulation was applied by Vue.js, either through built-in directives, e.g. v-if, or through ViewModel instance methods, e.g. vm.$appendTo(). CSS Transitions To enable CSS transitions on an element, simply give it an empty v-transition directive: You will also need to provide CSS rules for v-enter and v-leave classes (the class names can be configured with Vue.config()): Now when the show property changes, Vue.js will insert or remove the <p> element accordingly, and apply transition classes as specified below: It is important to ensure that the target element’s CSS transition rules are properly set and it will fire a transitionend event. CSS Animations Look at me! JavaScript Functions

Synchronized Multimedia Integration Language (SMIL 3.0) This version: Latest SMIL 3 version: Latest SMIL Recommendation: Previous version: Editors: Dick Bulterman, CWI - Jack Jansen, CWI - Pablo Cesar, CWI - Sjoerd Mullender, CWI - Eric Hyche, RealNetworks - Marisa DeMeglio, DAISY Consortium - Julien Quint, DAISY Consortium - Hiroshi Kawamura, NRCD - Daniel Weck, NRCD - Xabiel García Pañeda, Universidad de Oviedo - David Melendi, Universidad de Oviedo - Samuel Cruz-Lara, INRIA - Marcin Hanclik ACCESS Co., Ltd - Daniel F. Please refer to the errata for this document, which may include some normative corrections. This document is also available in a non-normative format: single HTML file. See also translations. Copyright © 2008 W3C® (MIT, ERCIM, Keio), All Rights Reserved. This document specifies the third version of the Synchronized Multimedia Integration Language (SMIL, pronounced "smile").

Related: