Animating in Frames: Repeating Picture Transition

In our final Movement Highlights assortment, I added a extremely superb reel by Joana Correia, a very expert movement designer. Her works are so considerate and shopping her newest initiatives I stumbled upon considered one of her different reels wrapping up her final 12 months. Proper in the beginning, there may be this:

This small excerpt showcases a extremely fascinating sliced repetition impact, which impressed me to attempt one thing new: animating “frames” of the identical picture alongside a path. I’m undecided if that is any good, however for some cause, I actually prefer it. It feels prefer it might match effectively inside editorial design contexts.

It’s only a proof of idea, however I hope it sparks some new concepts for you too! 🙂

Configuration

There are higher methods to do that clearly, however since it is a proof of idea and we would like to have the ability to present numerous results in our demo, I made a decision to do it like this. So right here’s how the configuration works.

Every grid merchandise can override the worldwide animation settings by specifying data- attributes instantly within the HTML. This enables fine-tuning of transitions on a per-item foundation.

You may customise the next choices for every .grid__item:

• clipPathDirection — data-clip-path-direction: Route for clip-path animation (top-bottom, bottom-top, left-right, right-left).
• steps — data-steps: Variety of mover parts created between grid merchandise and panel.
• stepDuration — data-step-duration: Period (in seconds) of every mover animation step.
• stepInterval — data-step-interval: Delay (in seconds) between every mover’s animation begin.
• rotationRange — data-rotation-range: Most random rotation (±worth, levels) utilized to movers.
• wobbleStrength — data-wobble-strength: Most random positional wobble (in pixels) throughout movement path era.
• moverPauseBeforeExit — data-mover-pause-before-exit: Pause period (in seconds) earlier than movers exit.
• panelRevealEase — data-panel-reveal-ease: Easing perform used when revealing the panel.
• gridItemEase — data-grid-item-ease: Easing perform for animating grid merchandise exits.
• moverEnterEase — data-mover-enter-ease: Easing perform for movers coming into.
• moverExitEase — data-mover-exit-ease: Easing perform for movers exiting.
• panelRevealDurationFactor — data-panel-reveal-duration-factor: Multiplier to regulate panel reveal animation timing.
• clickedItemDurationFactor — data-clicked-item-duration-factor: Multiplier to regulate clicked grid merchandise animation timing.
• gridItemStaggerFactor — data-grid-item-stagger-factor: Multiplier for staggered grid merchandise animations (primarily based on distance).
• moverBlendMode — data-mover-blend-mode: CSS mix-blend-mode to use to movers (regular, display screen, and so forth.).
• pathMotion — data-path-motion: Path movement sort: linear (straight) or sine (curved).
• sineAmplitude — data-sine-amplitude: Top of sine wave if utilizing sine path movement (in pixels).
• sineFrequency — data-sine-frequency: Frequency of sine wave movement (larger = extra waves).

Instance

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

Attempt it out and play with it and I actually hope you take pleasure in it!