Friday, May 30, 2025
News PouroverAI
Visit PourOver.AI
No Result
View All Result
  • Home
  • AI Tech
  • Business
  • Blockchain
  • Data Science & ML
  • Cloud & Programming
  • Automation
  • Front-Tech
  • Marketing
  • Home
  • AI Tech
  • Business
  • Blockchain
  • Data Science & ML
  • Cloud & Programming
  • Automation
  • Front-Tech
  • Marketing
News PouroverAI
No Result
View All Result

Push Animation on Grid Items

June 5, 2024
in Front-Tech
Reading Time: 2 mins read
0 0
A A
0
Share on FacebookShare on Twitter


Already a while back, I saw this really nice grid animation by Rémi Clauss:

I was particularly interested in the grid part where the smaller items fly away while the clicked one animates to fullscreen. So I was wondering if this could be something I could easily do with the help of CSS Grid and GSAP Flip. So I asked Rémi if I could use his concept and started experimenting.

When you use the CSS Grid layout you can define each grid item position exactly, for example .pos-9 { grid-area: 3 / 5 / 4 / 6; }. My idea was to try and use the Flip plugin to apply a class that will only touch the row or column, depending on where I want the items to go. So, when you animate the items to either north, south, west or east, you can have classes like this:

grid-row: 1;

grid-row: 7;

grid-column: 1;

grid-column: 7;

For example, the item in row 5 that flies north, will stay in its respective column. Now we just need to define where we want which item to move and apply the respective class.

The clicked item will be flipped into another element that becomes fullscreen.

And here is a variation where we just move north and south depending on the clicked item’s position. We also add a slight rotation:

And in this variation we move all of the items into one specific direction that we get from a data-attribute on every clicked item:

Hope you enjoy this little experiment and many thanks to Rémi who allowed me to use his concept here!

Thanks for checking by 🙂

Case Study: Oscar Pico Portfolio — 2024



Source link

Tags: Animationcss grid animationGridgrid animationgsap flip animationgsap flip griditemspush
Previous Post

Electric air taxi maker gets key FAA signoff

Next Post

The Aviation Industry’s Delay in Modernizing IT Infrastructure

Related Posts

The essential principles of a good homepage
Front-Tech

The essential principles of a good homepage

June 7, 2024
How to measure and improve user retention
Front-Tech

How to measure and improve user retention

June 6, 2024
How to build a Rails API with rate limiting
Front-Tech

How to build a Rails API with rate limiting

June 4, 2024
Introduction to the B.I.A.S. framework
Front-Tech

Introduction to the B.I.A.S. framework

June 3, 2024
Blue Ridge Ruby is exactly what we need
Front-Tech

Blue Ridge Ruby is exactly what we need

June 3, 2024
Symmetrical and asymmetrical balance in web design
Front-Tech

Symmetrical and asymmetrical balance in web design

May 31, 2024
Next Post
The Aviation Industry’s Delay in Modernizing IT Infrastructure

The Aviation Industry’s Delay in Modernizing IT Infrastructure

Rolling Stone cancels ‘lifetime’ subscribers’ print issues

Rolling Stone cancels 'lifetime' subscribers' print issues

Beyond Quadratic Bottlenecks: Mamba-2 and the State Space Duality Framework for Efficient Language Modeling

Beyond Quadratic Bottlenecks: Mamba-2 and the State Space Duality Framework for Efficient Language Modeling

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Trending
  • Comments
  • Latest
Is C.AI Down? Here Is What To Do Now

Is C.AI Down? Here Is What To Do Now

January 10, 2024
23 Plagiarism Facts and Statistics to Analyze Latest Trends

23 Plagiarism Facts and Statistics to Analyze Latest Trends

June 4, 2024
Implementing User Authentication in React Apps with Appwrite — SitePoint

Implementing User Authentication in React Apps with Appwrite — SitePoint

January 30, 2024
Accenture creates a regulatory document authoring solution using AWS generative AI services

Accenture creates a regulatory document authoring solution using AWS generative AI services

February 6, 2024
The 15 Best Python Courses Online in 2024 [Free + Paid]

The 15 Best Python Courses Online in 2024 [Free + Paid]

April 13, 2024
Managing PDFs in Node.js with pdf-lib

Managing PDFs in Node.js with pdf-lib

November 16, 2023
Can You Guess What Percentage Of Their Wealth The Rich Keep In Cash?

Can You Guess What Percentage Of Their Wealth The Rich Keep In Cash?

June 10, 2024
AI Compared: Which Assistant Is the Best?

AI Compared: Which Assistant Is the Best?

June 10, 2024
How insurance companies can use synthetic data to fight bias

How insurance companies can use synthetic data to fight bias

June 10, 2024
5 SLA metrics you should be monitoring

5 SLA metrics you should be monitoring

June 10, 2024
From Low-Level to High-Level Tasks: Scaling Fine-Tuning with the ANDROIDCONTROL Dataset

From Low-Level to High-Level Tasks: Scaling Fine-Tuning with the ANDROIDCONTROL Dataset

June 10, 2024
UGRO Capital: Targeting to hit milestone of Rs 20,000 cr loan book in 8-10 quarters: Shachindra Nath

UGRO Capital: Targeting to hit milestone of Rs 20,000 cr loan book in 8-10 quarters: Shachindra Nath

June 10, 2024
Facebook Twitter LinkedIn Pinterest RSS
News PouroverAI

The latest news and updates about the AI Technology and Latest Tech Updates around the world... PouroverAI keeps you in the loop.

CATEGORIES

  • AI Technology
  • Automation
  • Blockchain
  • Business
  • Cloud & Programming
  • Data Science & ML
  • Digital Marketing
  • Front-Tech
  • Uncategorized

SITEMAP

  • Disclaimer
  • Privacy Policy
  • DMCA
  • Cookie Privacy Policy
  • Terms and Conditions
  • Contact us

Copyright © 2023 PouroverAI News.
PouroverAI News

No Result
View All Result
  • Home
  • AI Tech
  • Business
  • Blockchain
  • Data Science & ML
  • Cloud & Programming
  • Automation
  • Front-Tech
  • Marketing

Copyright © 2023 PouroverAI News.
PouroverAI News

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In