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

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!