This is a simple demonstration of how easy you can make your ngView directive transition pages with nice animations. All you need to do is set up necessary CSS rules!
Hope this mini-project was useful for you! If you have any question or ideas for new animations, feel free to contact me or submit pull request.
Check it in action!
Thank you for stopping by!
HI I have 2 partials and one Ng view.
Partial 1-header
Ng-view-class slide animation
Partial 2..footer
When I use the slide animation...it makes the partial view...the header move up and stay there.
How do I stop this from happening?
thanks,
Hi,
I am looking for same pop-out effect on angular material sheet. I want to use 'pop-out' effect to hide some content and show next content.
That is exactly you are doing on ng-view. But in my case while click on 'Next' the another md-card (material sheet) will be change,
Does it possible using this library ?
First of all, really nice job with this demo. This is exactly what I am looking to accomplish (smooth transitions between angular views).
Using the newest version of angular though, as you likely know, they have dropped core router support. As a result, I am using the ui-router module for my "states".
After dropping in the css rules as outlined in your demo, things did animate, but were very jerky and odd (newest version of Chrome). I'm wondering if this has something to do with some differences using ui-router. Would you happen to know?
Thanks!
Hi, i forked your repo and more than issue is a request or guidance
First thanks for this mini-project.
Second, i need to use it to navigate back and forth between views, i managed to modify the pagesController in order to move with a prev and next buttons and left only the slide effect, however i cannot make it slide the other way like you do when pressing the back button on browser, how can i do it?
Thanks in advance!
Edit I solved it by adding a new class in css that switches left from negative to positive and also for leave. Then when the corresponding event is clicked i add or remove the class.
I was looking for view animations but only found terrible examples for beginners. Yours was the best and most straight forward example.
Looking forward to giving the same back to open source community. Kudos (Y).
Great project, i love it. Really helped me to add nganimate to my site. Im just wondering though why does adding .slide cause my html to be wider then the window.
Great Work, I liked animation style mobile, right to left and go back left to right
You made this in example page, pressing "view source" button, and pressing "Back" button
All we have to do, is include (view source page)
in html div class="" back-animation="" ...
in CSS .reverse .page.slide.ng-enter {, etc
in JS directive backAnimation function backToPages in controller
Tnks
Greetings!
This is great stuff! Just what I needed to learn to put together a portfolio for my site. For some reason the index.html inside of the App folder is operating correctly. I am still learning this stuff, do you know why that is not work?
you other index is just the link back to your github branch which shows the angular app working appropriately.
Easy Effect ?? Introduction Easy Effect is a WYSIWYG animation editor based on Lottie. ✨ Feature ?? ease to use Anyone who want to create an animation
Rain & Water Effect Experiments Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber. Article on Codrops
Image Trail Effects A set of effects for mouse-following image trails that show a random series of images. Inspired by the effect seen on VLNC Studio.
90's Cursor Effects "Knowing the codes" used to be all the rage, I want to bring a few back. A repo of the old effects that inspired creativity and th
Image Dragging Effects A set of playful effects for dragging images. Article on Codrops Demo Installation Install dependencies: npm install Compile t
Text Input Effects Simple styles and effects for enhancing text input interactions. Article on Codrops Demo Integrate or build upon it for free in you
vue-particle-effect-buttons (demo) Bursting particle effect buttons for Vue. This library is a Vue portal of an awesome Codrops Article by Luis Manuel
Particle Effects for Buttons Bursting particles effects for buttons. By Luis Manuel. Article on Codrops Demo Credits anime.js Basic usage The Particle
Asset loading effects This is a library to show the loading progress of given assets and reveal them using various animations. Please give feedback, r
Live Audio Input effects I whipped this app up to test live audio input, letting the user select a few common tunable effects and see (and hear) the e
Distorted Link Effects A couple of ideas for decorative link distortion effects using SVG filters on lines, circles and squares. Article on Codrops De
Organic Shape Animations with SVG clipPath Some shape morphing hover effects using SVG clipPath on an image. Article on Codrops Demo Credits Anime.js
gl-slideshow An advanced 2D slideshow with WebGL, provides a variety of beautiful effects with GLSL power. Shaders are forked from https://gl-transiti
JParticles · 中文 | English 官网：jparticles.js.org 特效列表 粒子运动 波纹运动 波纹进度条 雪花飘落 线条动画 介绍 JParticles（JavaScript Particles 的缩写）是一款基于 Canvas 的不依赖于其他库的轻量级 JavaScr
gl-slideshow An advanced 2D slideshow with WebGL, provides a variety of beautiful effects with GLSL power. Shaders are forked from https://gl-transiti
particles-bg React component for particles backgrounds This project refers to the source code of the Proton official website, I packaged it into a com
particles-bg-vue A vue.js particles animation background component. Use it to make your website look cool. Check it out if you want to use it in React
Pure CSS ripple effect (no JavaScript) CSS-only implementation of Android Material design "ripple" animation on click event Main advantage of this sol
Circle SVG Animation Plug css, js and just add short code in your html. Change the custom attribute data-percent and data-time for setting your percen
10 Dec 16, 2022
1.4k Jan 4, 2023
2.6k Jan 9, 2023
252 Nov 11, 2022
97 Dec 8, 2022
488 Dec 22, 2022
68 Nov 28, 2022
466 Dec 27, 2022
561 Dec 24, 2022
334 Dec 11, 2022
24 Aug 18, 2022