Playground -

Unreveal Effects for Content Previews

By zebethcontrolPosted on November 1, 2022Posted in page-transition, PlaygroundTagged unreveal animationNo Comments

Some explorations of page transitions using covering elements and CSS clip-paths. From our sponsor: Sell access to courses, classes, and community with Squarespace. Some time ago, we explored a cover page transition that would hide some initial content and show another level of content, i.e. “unreveal” it. Today I’d love to share some more ideas for showing another page or preview, including one that uses CSS clip-path to achieve the effect. This is our initial view: When clicking on an item, we hide the current content by covering it with an expanding circle. Then uncover the preview by expanding a clip-path. This is the next view: And this is how it all looks in action: There are three different effects. Hope you enjoy them and find them useful! Thanks for checking by! UI Interactions & Animations Roundup #26

Smooth Panel Scroll Effects | Codrops

By zebethcontrolPosted on October 12, 2022Posted in Playground, scrollTagged smooth scrollingNo Comments

From our sponsor: Get personalized content recommendations to make your emails more engaging. Sign up for Mailchimp today. If you have browsed through our latest website roundup you might have seen the amazing website of Margot Priolet. I absolutely love the hero section effect when scrolling and I wanted to remake it and explore some variations including playing with transforms and filter effects. So the initial view is a hero section like this: When scrolling, an image section is revealed with an opacity effect. Here, there are many possibilities for variations. After scrolling for a bit and triggering the effects on the images, we reach the final section. This is how it all comes together: This demo shows how to play with smaller images and the black and white filter. Hope you enjoy this and find it useful! Inspirational Websites Roundup #42

Menu to Grid Layout Animation

By zebethcontrolPosted on October 9, 2022Posted in grid, menu, PlaygroundTagged grid layout animationNo Comments

A simple layout animation where the thumbnails of a menu row animate to their position in a content preview grid. From our sponsor: Get personalized content recommendations to make your emails more engaging. Sign up for Mailchimp today. Today I’d like to share a little layout animation with you. It’s inspired by the design of Sturdy’s client showcase. Initially, we have a row based menu layout which shows some thumbnails on hover. Using the GSAP’s flip plugin, we animate the row to a content preview with larger images which fly to their position in a grid. Here’s the initial view: When hovering, some images appear on the right side. Once we click, the thumbnails animate to form a grid and some additional grid items appear: Here is how it all comes together: I hope you enjoy this little animation and find it useful! How to Code a Scrollable Text Gallery in Three.js How to Help Your Creator Clients Monetize Their Content with a WordPress Membership Site

On-Scroll Animation and View Switch

By zebethcontrolPosted on October 9, 2022Posted in Playground, scrollTagged gsap flip, lenis, smooth scrolling, switchNo Comments

From our sponsor: Get personalized content recommendations to make your emails more engaging. Sign up for Mailchimp today. Today I’d love to share a little layout with you where we have some fun on-scroll animations going on and an overview switch. The idea is to have a view switch which allows the layout (specifically the images) to change into a grid. The switch is made with the help of GreenSocks’ Flip plugin and we use Lenis for the smooth scrolling. Our initial layout looks as follows: While scrolling, a few things happen. The titles next to the images will be hidden and we also have a marquee that moves across the page. Once we click on the switch, all images will animate to their position in the grid: I hope you like this little layout and find it useful!