Home / JavaScript / Animations

An experimental page transition concept for magazines and blogs where an excerpt item opens for a full page view.

Preview to Content Page Transition An experimental page transition concept for magazines and blogs where an excerpt item opens for a full page view. A
Information
Category: JavaScript / Animations
Watchers: 3
Star: 22
Fork: 1
Last update: Sep 26, 2021
Resource links
https://github.com/codrops/PreviewContentTransition

Preview to Content Page Transition

An experimental page transition concept for magazines and blogs where an excerpt item opens for a full page view.

Preview to Content Page Transition

Article on Codrops

Demo

Installation

Install dependencies:

npm install

Compile the code for development and start a local server:

npm start

Create the build:

npm run build

Credits

Misc

Follow Codrops: Twitter, Facebook, GitHub, Instagram

License

MIT

Made with 💙 by Codrops

0 Open More issues
Closed

Magnetic effect for "item__enter" buttons doesn't work

The magnetic hover effect for buttons with "item__enter" classes fails from 2nd button onwards @crnacura @botelho

opened Apr 10, 2021 by marathe-atharva 1

Contents

    codrops A simple morphing page transition effect where an SVG path gets morphed into another while the current page moves up.
    kartik918 👨‍💻 VS-Code Extension that adds an excerpt from The Bee Movie 🐝 to replace the boring old Lorem Ipsum text
    iamyoki ☄️ An extreme light-weight react transition animation hook which is simpler and easier to use than react-transition-group
    Rapid-Application-Development-JS Library for transition animations between blocks (pages) in the application.
    patrickreynolds Keynote-style Magic Move transition animations
    AlexanderMelde Simple shell script to batch download heise magazine PDFs. You need to have access to the archive via a paid subscription to use this.
    kaichunlin Allows the easy creation of animated transition effects when the state of Android UI has changed
    xmuSistone viewpager with parallax pages, together with vertical sliding (or click) and activity transition
    theterminalguy Opens your current git branch in the remote specified. Defaults to GitHub
    andylokandy smallbox - Small Box optimization: store small item on stack and fallback to heap for large item
    ayushoriginal Item Catalog Application with Authentication, Registration and Categorization
    danylovolokh This is a project designed to help controlling Android MediaPlayer class. It makes it easier to use MediaPlayer ListView and RecyclerView. Also it tracks the most visible item in scrolling list. When new item in the list become the most visible, this library gives an API to track it.
    Myth-devs Growtopia Item Deserializer written in JavaScript.
    huzenan A light Shared Elements Transition lib for Android.
    codrops An experimental animation where an image goes from thumbnail to full width, allowing for a classy entry to an article view.
    naru-jpn Custom interactive view controller transition from one view to another view.
    codrops A simple image grid layout where a small grid image zooms to become larger while a content view opens.
    TryGhost 👻 The #1 headless Node.js CMS for professional publishing
    coinpride Curated collection of blockchain & cryptocurrency resources.
    lambdalisue 🎭 Guise is a Vim/Neovim plugin that opens a new tab page rather than invokes a new nested instance when a user tried to open a new Vim/Neovim through a job or terminal on the instance.
    shaileshmamgain5 Carousel-Notification lets you make carousel type notification where user can navigate within the notification. Selected item can be obtained using a broadcast receiver.
    Share this repo

    Related Repos


    Animations
    3.6k
    JavaScript implementation of the Web Animations API
    web-animations What is Web Animations? A new JavaScript API for driving animated content on the web. By unifying the animation features of SVG and CSS, Web Animation
     
    Animations
    3.4k
    A simple but powerful tweening / animation library for Javascript. Part of the CreateJS su...
    CreateJS TweenJS TweenJS is a simple tweening library for use in Javascript. It was developed to integrate well with the EaselJS library, but is not dependent
     
    Animations
    3k
    A lightweight javascript library for WeUI.
    Tencent weui.js 概述 WeUI 的轻量级 js 封装。 注意：由于微信小程序不支持dom操作，所以weui.js并不适用于小程序。不过WeUI也为小程序开发了另外的版本，详情请看：https://github.com/Tencent/weui-wxss/ 手机预览 https://weui.io/w
     
    Animations
    41
    Textureless fog particles using a highly customizable shader to attenuate noise values.
    MirzaBeig Atmospheric GPU Fog Particles Textureless fog particles for Unity using a highly customizable shader to attenuate multiple layers of noise. Works grea
     
    Animations
    1.2k
    SQL Formatter is a JavaScript library for pretty-printing SQL queries
    sql-formatter-org SQL Formatter is a JavaScript library for pretty-printing SQL queries. It started as a port of a PHP Library, but has since considerably diverged.
     
    Animations
    7
    It is a JavaScript library, which contains many beautiful and free text effects.
    mohamedfrindi TxtAnime.js It is a JavaScript library, which contains many beautiful and free text effects. Demo Installation npm npm install txtanime.js --save //
     
    Animations
    4
    A list of addictive applications to avoid, reasons for why they are addictive, and how to ...
    buoyantair addictive-apps A list of addictive applications to avoid, reasons for why they are addictive, and how to protect yourself from falling to addiction. I
     
    Animations
    3
    You'll find the guide how to create dynamic marquee effect in this demo.
    Cuberto Cuberto Marquee Effect Demo Frontend dependencies GSAP (https://greensock.com/gsap/) Setup demo project Install npm install Start develop server gulp
     
    Animations
    3
    Prop and Animation developer tool
    baguscodestudio propanimenu Prop and Animation developer tool Dependencies menuv nh-keyboard a fork of nerohiro version with before keyup update Usage Commands /propa
     
    Animations
    10
    Webbased Character Animation System
    sketchpunklabs ossos Character Animation Library This project focus is to allow animating 3D character in web application, games, metaverses, etc that are rendered i
     
    Animations
    957
    🏆 WebRTC with integrated SFU server. Video calls, messaging, screen sharing, recording an...
    miroslavpejic85 🏆 WebRTC with integrated SFU server. Video calls, messaging, screen sharing, recording and more.🏆
     
    Animations
    1.1k
    🔮 CSS loading animations made with single element.
    nzbin 🔮 CSS loading animations made with single element.
     
    Animations
    8
    An algebraic effects library for javascript and typescript using generators
    Protowalker Algebraify Algebraic Effects Are Here! (sort of) (If you're unfamiliar with algebraic effects, here's a great article: Algebraic Effects for the Rest
     
    Animations
    9.3k
    The lightweight library for manipulating and animating SVG
    svgdotjs SVG.js A lightweight library for manipulating and animating SVG, without any dependencies. SVG.js is licensed under the terms of the MIT License. Inst
     
    Animations
    412
    The famous Matrix rain effect of falling green characters in a terminal
    nojvek The famous Matrix rain effect of falling green characters in a terminal