Apple Sway romance in Prague

Post pobrano z: Apple Sway romance in Prague

Apple’s engagement in the festive season has begun with “Sway”, a commercial set in the snow-laden streets of Prague. The Apple Sway commercial shows a man and a woman bumping into each other in the street, launching into a fantastic dance inspired by Sam Smith’s track, “Palace” on a shared pair of wireless AirPods, powered by an iPone X. “Move someone this holiday”. The magic is turned on with a switch from the busy daylight scenes of Prague to deserted streets filled with flurries of snow and Christmas lights. The two dancers are real-life married couple Lauren Yalango-Grant and Christopher Grant from New York City. The title “Sway”, could be linked with the Dean Martin 1954 hit of the same name. “Other dancers may be on the floor, dear, but my eyes will see only you. Only you have the magic technique. When we sway I go weak.”

Apple Sway in Prague

Apple Sway Credits

The Apple Sway campaign was developed at TBWA/Media Arts Lab.

Filming was shot on location in Prague by director Sam Brown via Imperial Woodpecker with director of photography Franz Lustig, producer Timory King, production designer Quito Cooksey.

Local production in Prague was by Unit+Sofa.

Music is “Palace” by Sam Smith.

Danielle lands for Spanish Christmas Lottery

Post pobrano z: Danielle lands for Spanish Christmas Lottery

SELAE (Sociedad Estatal Loterías y Apuestas del Estado) is promoting the 2017 Christmas Lottery with “Danielle”, an advertising campaign following on from the viral success of Justino in 2015 and Carmina in 2016. “Danielle” tells the story of an interstellar visitor who unexpectedly lands on Earth and meets Daniel, a tour guide from Madrid. The film follows their shared story of hope, love and a lottery number, which forever binds them. “Danielle” demonstrates that the best part about the Spanish Christmas lottery is sharing it with the ones you love.

Danielle Loteria commercial

The Danielle film is coupled with an online activation, online at, that plays on the Spanish Christmas Lottery’s unique system, in which groups of people can share a number and win together. For the first time, Spaniards will also be able to create connections with unknown lotto players who share their same number on Using their lottery numbers, represented as stars, players can form constellations with others who unknowingly share the same lottery number, creating new and surprising connections in the process.

Danielle Loteria poster
Danielle Loteria poster

Danielle Credits

The Danielle campaign was developed at Leo Burnett Madrid by chief creative officer Juan García-Escudero, creative directors Gaston Guetmonovitch, Mercedes Lucena, Iñaki Martí, art directors Javier Lopez Canle, Sergio García, Juan Frias, copywriters Jorge Castro, Federico Botella, digital art director Sergio Garcia, digital copywriters Iris Fernández, Teresa García, tech team Víctor Moreno and Horacio Panella, agency producers Esther García, Gustavo Samaniego, channel planner Ana Matesanz, account director Sara Iglesias, account manager Sara Cubillo, digital leader Carmina Serrano, account executive Carlos Martín, working with SELAE marketing team Jesús Mayoral, Federico Fernández, and Margarita Moreno.

Filming was shot by director Alejandro Amenábar via Caviar with executive producer Alfonso Cazalilla and producer Mafe Bello,

Music, “Danielle”, was created by Roque Baños.

Heavenly City: an Art Project by Yang Yongliang

Post pobrano z: Heavenly City: an Art Project by Yang Yongliang
first image of the post

Yang Yongliang is a Chinese artist based in Shanghai. He has a background of traditional Chinese art, such as calligraphy or painting, that started from a very early age. He pursued further art education at Hong-Kong Chinese  and Shaghai Fine Arts Institute. He turned this knowledge into something new using modern digital art techniques. His work has been exhibited all around the world.

Yongliang’s project Heavenly City is one of his recent works, it uses digital techniques and photography to create scenes that look like traditional Chinese paintings with a twist. Entire cities seem built upon clouds of destruction, making it look ephemeral scenes doomed to disappear quickly.

When design goes wrong: 10 wonderful design fails

Post pobrano z: When design goes wrong: 10 wonderful design fails
first image of the post

The easiest way to demonstrate the purpose of design is maybe the absurd way. Good design isn’t always spectacular, while bad design will show you exactly what parts of the work the designer is paid for. Here are 10 examples of design fails that will make you smile.

1. Fashion Fart

When using a capital letter in a big format, make sure that people understand which word it belongs too. With poor positioning, it can take a whole new meaning.

2. Congratulations you have cancer

This is not the right way to announce a baby to new parents, even if she or he is born between June 21 or July 22.

3. M&Ms sticker placement

Not a mistake at first, but the label placement makes this packaging illustration very ambiguous. Not sure if I would remove it.

4. Failed price tag

Certainly, the worst possible way to add a price tag to clothes.

5. Nothing is possible

This doormat was designed with good intention, it was supposed to send a motivational message to cheer you up. Poor contrast and text placement turned it into a depressing way to welcome people.

6. This advertisement for a job

It’s either a poor URL choice or a genius way to test applicants’ dedication to get the job. If you can apply to this, you really displayed a certain focus ability.

7. This newspaper title

Yes, adding a reflection to a text that is integrated into the water makes sense, but you should be careful with any potential changes to the meaning.

8. Quit school

This anti-smoking advertisement was placed on a school bus, it totally changed the message.

9. Pregnancy test advertisement

Apparently, even after 7 months of pregnancy, you can have some doubt. Take the test!

10. Disabled elderly pregnant children

Yes, commas matter when it comes to sending a message.

Animating Layouts with the FLIP Technique

Post pobrano z: Animating Layouts with the FLIP Technique

User interfaces are most effective when they are intuitive and easily understandable to the user. Animation plays a major role in this – as Nick Babich said, animation brings user interfaces to life. However, adding meaningful transitions and micro-interactions is often an afterthought, or something that is “nice to have” if time permits. All too often, we experience web apps that simply “jump” from view to view without giving the user time to process what just happened in the current context.

This leads to unintuitive user experiences, but we can do better, by avoiding “jump cuts” and “teleportation” in creating UIs. After all, what’s more natural than real life, where nothing teleports (except maybe car keys), and everything you interact with moves with natural motion?

In this article, we’ll explore a technique called “FLIP” that can be used to animate the positions and dimensions of any DOM element in a performant manner, regardless of how their layout is calculated or rendered (e.g., height, width, floats, absolute positioning, transform, flexbox, grid, etc.)

Why the FLIP technique?

Have you ever tried to animate height, width, top, left, or any other properties besides transform and opacity? You might have noticed that the animations look a bit janky, and there’s a reason for that. When any property that triggers layout changes (such as `height`), the browser has to recursively check if any other element’s layout has changed as a result, and that can be expensive. If that calculation takes longer than one animation frame (around 16.7 milliseconds), then the animation frame will be skipped, resulting in „jank”
since that frame wasn’t rendered in time. In Paul Lewis’ article „Pixels are Expensive”, he goes further in depth at how pixels are rendered and the various performance expenses.

In short, our goal is to be short — we want to calculate the least amount of style changes necessary, as quickly as possible. The key to this is only animating transform and opacity, and FLIP explains how we can simulate layout changes using only transform.

What is FLIP?

FLIP is a mnemonic device and technique first coined by Paul Lewis, which stands for First, Last, Invert, Play. His article contains an excellent explanation of the technique, but I’ll outline it here:

  • First: before anything happens, record the current (i.e., first) position and dimensions of the element that will transition. You can use getBoundingClientRect() for this, as will be shown below.
  • Last: execute the code that causes the transition to instantaneously happen, and record the final (i.e., last) position and dimensions of the element.*
  • Invert: since the element is in the last position, we want to create the illusion that it’s in the first position, by using transform to modify its position and dimensions. This takes a little math, but it’s not too difficult.
  • Play: with the element inverted (and pretending to be in the first position), we can move it back to its last position by setting its transform to none.

Below is how these steps can be implemented:

const elm = document.querySelector('.some-element');

// First: get the current bounds
const first = getBoundingClientRect(elm);

// execute the script that causes layout change

// Last: get the final bounds
const last = getBoundingClientRect(elm);

// Invert: determine the delta between the 
// first and last bounds to invert the element
const deltaX = first.left - last.left;
const deltaY = -;
const deltaW = first.width / last.width;
const deltaH = first.height / last.height;

// Play: animate the final element from its first bounds
// to its last bounds (which is no transform)
  transformOrigin: 'top left',
  transform: `
    translate(${deltaX}px, ${deltaY}px)
    scale(${deltaW}, ${deltaH})
}, {
  transformOrigin: 'top left',
  transform: 'none'
}], {
  duration: 300,
  easing: 'ease-in-out',
  fill: 'both'

See the Pen How the FLIP technique works by David Khourshid (@davidkpiano) on CodePen.

There are two important things to note:

  1. If the element’s size changed, you can transform scale in order to “resize” it with no performance penalty; however, make sure to set transformOrigin to 'top left' since that’s where we based our delta calculations.
  2. We’re using the Web Animations API to animate the element here, but you’re free to use any other animation engine, such as GSAP, Anime, Velocity, Just-Animate, Mo.js and more.

Shared Element Transitions

One common use-case for transitioning an element between app views and states is that the final element might not be the same DOM element as the initial element. In Android, this is similar to a shared element transition, except that the element isn’t “recycled” from view to view in the DOM as it is on Android.

Nevertheless, we can still achieve the FLIP transition with a little magic illusion:

const firstElm = document.querySelector('.first-element');

// First: get the bounds and then hide the element (if necessary)
const first = getBoundingClientRect(firstElm);'visibility', 'hidden');

// execute the script that causes view change

// Last: get the bounds of the element that just appeared
const lastElm = document.querySelector('.last-element');
const last = getBoundingClientRect(lastElm);

// continue with the other steps, just as before.
// remember: you're animating the lastElm, not the firstElm.

Below is an example of how two completely disparate elements can appear to be the same element using shared element transitions. Click one of the pictures to see the effect.

See the Pen FLIP example with WAAPI by David Khourshid (@davidkpiano) on CodePen.

Parent-Child Transitions

With the previous implementations, the element bounds are based on the window. For most use cases, this is fine, but consider this scenario:

  • An element changes position and needs to transition.
  • That element contains a child element, which itself needs to transition to a different position inside the parent.

Since the previously calculated bounds are relative to the window, our calculations for the child element are going to be off. To solve this, we need to ensure that the bounds are calculated relative to the parent element instead:

const parentElm = document.querySelector('.parent');
const childElm = document.querySelector('.parent > .child');

// First: parent and child
const parentFirst = getBoundingClientRect(parentElm);
const childFirst = getBoundingClientRect(childElm);


// Last: parent and child
const parentLast = getBoundingClientRect(parentElm);
const childLast = getBoundingClientRect(childElm);

// Invert: parent
const parentDeltaX = parentFirst.left - parentLast.left;
const parentDeltaY = -;

// Invert: child relative to parent
const childDeltaX = (childFirst.left - parentFirst.left)
  - (childLast.left - parentLast.left);
const childDeltaY = ( -
  - ( -;
// Play: using the WAAPI
  { transform: `translate(${parentDeltaX}px, ${parentDeltaY}px)` },
  { transform: 'none' }
], { duration: 300, easing: 'ease-in-out' });

  { transform: `translate(${childDeltaX}px, ${childDeltaY}px)` },
  { transform: 'none' }
], { duration: 300, easing: 'ease-in-out' });

A few things to note here, as well:

  1. The timing options for the parent and child (duration, easing, etc.) do not necessarily need to match with this technique. Feel free to be creative!
  2. Changing dimensions in parent and/or child (width, height) was purposefully omitted in this example, since it is an advanced and complex topic. Let’s save that for another tutorial.
  3. You can combine the shared element and parent-child techniques for greater flexibility.

Using Flipping.js for Full Flexibility

The above techniques might seem straightforward, but they can get quite tedious to code once you have to keep track of multiple elements transitioning. Android eases this burden by:

  • baking shared element transitions into the core SDK
  • allowing developers to identify which elements are shared by using a common android:transitionName XML attribute

I’ve created a small library called Flipping.js with the same idea in mind. By adding a data-flip-key="..." attribute to HTML elements, it’s possible to predictably and efficiently keep track of elements that might change position and dimensions from state to state.

For example, consider this initial view:

    <section class="gallery">
      <div class="photo-1" data-flip-key="photo-1">
        <img src="/photo-1"/>
      <div class="photo-2" data-flip-key="photo-2">
        <img src="/photo-2"/>
      <div class="photo-3" data-flip-key="photo-3">
        <img src="/photo-3"/>

And this separate detail view:

    <section class="details">
      <div class="photo" data-flip-key="photo-1">
        <img src="/photo-1"/>
      <p class="description">
        Lorem ipsum dolor sit amet...

Notice in the above example that there are 2 elements with the same data-flip-key="photo-1". Flipping.js tracks the “active” element by choosing the first element that meet these criteria:

  • The element exists in the DOM (i.e., it hasn’t been removed or detached)
  • The element is not hidden (hint: getBoundingClientRect(elm) will have { width: 0, height: 0 } for hidden elements)
  • Any custom logic specified in the selectActive option.

Getting Started with Flipping.js

There’s a few different packages for Flipping, depending on your needs:

  • flipping.js: tiny and low-level; only emits events when element bounds change
  • flipping.web.js: uses WAAPI to animate transitions
  • flipping.gsap.js: uses GSAP to animate transitions
  • More adapters coming soon!

You can grab the minified code directly from unpkg:

Or you can npm install flipping --save and import it into your projects:

// import not necessary when including the unpkg scripts in a <script src="..."> tag
import Flipping from 'flipping/adapters/web';

const flipping = new Flipping();

// First: let Flipping read all initial bounds;

// execute the change that causes any elements to change bounds

// Last, Invert, Play: the flip() method does it all

Handling FLIP transitions as a result of a function call is such a common pattern, that the .wrap(fn) method transparently wraps (or “decorates”) the given function by first calling .read(), then getting the return value of the function, then calling .flip(), then returning the return value. This leads to much less code:

const flipping = new Flipping();

const flippingDoSomething = flipping.wrap(doSomething);

// anytime this is called, FLIP will animate changed elements

Here is an example of using flipping.wrap() to easily achieve the shifting letters effect. Click anywhere to see the effect.

See the Pen Flipping Birthstones #Codevember by David Khourshid (@davidkpiano) on CodePen.

Adding Flipping.js to Existing Projects

In another article, we created a simple React gallery app using finite state machines. It works just as expected, but the UI could use some smooth transitions between states to prevent “jumping” and improve the user experience. Let’s add Flipping.js into our React app to accomplish this. (Keep in mind, Flipping.js is framework-agnostic.)

Step 1: Initialize Flipping.js

The Flipping instance will live on the React component itself, so that it’s isolated to only changes that occur within that component. Initialize Flipping.js by setting it up in the componentDidMount lifecycle hook:

  componentDidMount() {
    const { node } = this;
    if (!node) return;
    this.flipping = new Flipping({
      parentElement: node
    // initialize flipping with the initial bounds;

By specifying parentElement: node, we’re telling Flipping to only look for elements with a data-flip-key in the rendered App, instead of the entire document.

Then, modify the HTML elements with the data-flip-key attribute (similar to React’s key prop) to identify unique and “shared” elements:

  renderGallery(state) {
    return (
      <section className="ui-items" data-state={state}>
        {, i) =>
            style={{'--i': i}}
            onClick={() => this.transition({
              type: 'SELECT_PHOTO', item
  renderPhoto(state) {
    if (state !== 'photo') return;
    return (
        onClick={() => this.transition({ type: 'EXIT_PHOTO' })}>

Notice how the img.ui-item and img.ui-photo are represented by data-flip-key={} and data-flip-key={} respectively: when the user clicks on an img.ui-item, that item is set to, so the .link values will be equal.

And since they are equal, Flipping will smoothly transition from the img.ui-item thumbnail to the larger img.ui-photo.

Now we need to do two more things:

  1. call whenever the component will update
  2. call this.flipping.flip() whenever the component did update

Some of you might have already guessed where these method calls are going to occur: componentWillUpdate and componentDidUpdate, respectively:

  componentWillUpdate() {;
  componentDidUpdate() {

And, just like that, if you’re using a Flipping adapter (such as flipping.web.js or flipping.gsap.js), Flipping will keep track of all elements with a [data-flip-key] and smoothly transition them to their new bounds whenever they change. Here is the final result:

See the Pen FLIPping Gallery App by David Khourshid (@davidkpiano) on CodePen.

If you would rather implement custom animations yourself, you can use flipping.js as a simple event emitter. Read the documentation for more advanced use-cases.

Flipping.js and its adapters handle the shared element and parent-child transitions by default, as well as:

  • interrupted transitions (in adapters)
  • enter/move/leave states
  • plugin support for plugins such as mirror, which allows newly entered elements to “mirror” another element’s movement
  • and more planned in the future!


Similar libraries include:

  • FlipJS by Paul Lewis himself, which handles simple single-element FLIP transitions
  • React-Flip-Move, a useful React library by Josh Comeau
  • BarbaJS, not necessarily a FLIP library, but one that allows you to add smooth transitions between different URLs, without page jumps.

Further resources:

Animating Layouts with the FLIP Technique is a post from CSS-Tricks