Animating in Frames: Repeating Image Transition

In our last Motion Highlights collection, I added a really amazing reel by Joana Correia, a truly skilled motion designer. Her works are so thoughtful and browsing her latest projects I stumbled upon one of her other reels wrapping up her last year. Right at the beginning, there is this:

This small excerpt showcases a really interesting sliced repetition effect, which inspired me to try something new: animating “frames” of the same image along a path. I’m not sure if this is any good, but for some reason, I really like it. It feels like it could fit well within editorial design contexts.

It’s just a proof of concept, but I hope it sparks some new ideas for you too! 🙂

Configuration

There are better ways to do this obviously, but since this is a proof of concept and we want to be able to show various effects in our demo, I decided to do it like this. So here’s how the configuration works.

Each grid item can override the global animation settings by specifying data- attributes directly in the HTML. This allows fine-tuning of transitions on a per-item basis.

You can customize the following options for each .grid__item:

• clipPathDirection — data-clip-path-direction: Direction for clip-path animation (top-bottom, bottom-top, left-right, right-left).
• steps — data-steps: Number of mover elements created between grid item and panel.
• stepDuration — data-step-duration: Duration (in seconds) of each mover animation step.
• stepInterval — data-step-interval: Delay (in seconds) between each mover’s animation start.
• rotationRange — data-rotation-range: Maximum random rotation (±value, degrees) applied to movers.
• wobbleStrength — data-wobble-strength: Maximum random positional wobble (in pixels) during motion path generation.
• moverPauseBeforeExit — data-mover-pause-before-exit: Pause duration (in seconds) before movers exit.
• panelRevealEase — data-panel-reveal-ease: Easing function used when revealing the panel.
• gridItemEase — data-grid-item-ease: Easing function for animating grid item exits.
• moverEnterEase — data-mover-enter-ease: Easing function for movers entering.
• moverExitEase — data-mover-exit-ease: Easing function for movers exiting.
• panelRevealDurationFactor — data-panel-reveal-duration-factor: Multiplier to adjust panel reveal animation timing.
• clickedItemDurationFactor — data-clicked-item-duration-factor: Multiplier to adjust clicked grid item animation timing.
• gridItemStaggerFactor — data-grid-item-stagger-factor: Multiplier for staggered grid item animations (based on distance).
• moverBlendMode — data-mover-blend-mode: CSS mix-blend-mode to apply to movers (normal, screen, etc.).
• pathMotion — data-path-motion: Path motion type: linear (straight) or sine (curved).
• sineAmplitude — data-sine-amplitude: Height of sine wave if using sine path motion (in pixels).
• sineFrequency — data-sine-frequency: Frequency of sine wave motion (higher = more waves).

Example

<figure class="grid__item"
        data-clip-path-direction="left-right"
        data-steps="8"
        data-rotation-range="20"
        data-path-motion="sine"
        data-sine-amplitude="60"
        data-sine-frequency="6.28">

  <div class="grid__item-image" style="background-image: url(assets/img32.webp)"></div>
  
  <figcaption class="grid__item-caption">
    <h3>Aura — K21</h3>
    <p>Model: Lily Cooper</p>
  </figcaption>
  
</figure>

This item will fly with 8 movers, stronger rotation wobble, a sine wave path, and panel opening from left to right.

Try it out and play with it and I really hope you enjoy it!