I have a site using jQuery and ScrollMagic. When the user scroll to a specific element ScrollMagic captures that and trigger an animation using TweenMax.
In jQuery the code looks like this
var scene = new ScrollScene({
triggerElement: '#animation_start'
}).setTween(TweenMax.from('#demo', 0.5 ,{opacity:0}));
controller.addScene([scene]);
In the new version of the site, there is a part of the page that contains much more complex animation that can be handled easily by AngularJS' two way data blinding and I want to take advantage of that. I am new to AngularJS, but I have written a couple apps in AngularJS. I am trying to wrap my head around what's the right way to approach this. Essentially, this is what I want to happen. When the user scroll to #animation_start, the AngularJS powered animation starts. In pseudo jQuery, it looks something like this:
var scene = new ScrollScene({
triggerElement: '#animation_start'
}).setTween(**AMAZING ANIMATION TO BE HANDLED BY ANGULARJS**);
controller.addScene([scene]);
I know I am thinking the wrong way because I am still thinking jQuery. How should I approach this problem and how should I structure the code?
Any help is appreciated.
As mentioned in Jan's answer the "proper" way to do this is with a directive that wraps ScrollMagic allowing you to define your behaviours in the markup.
I recently came across this problem myself and couldn't find an existing directive so wrote my own. It's very new and as yet undocumented but features an example, I hope to add more soon. Any feedback appreciated.
https://github.com/homerjam/angular-scroll-magic
In brief this allows you to do the following:
<body sm-scene="mainScene" duration="100%" trigger-hook="0.1">
<div class="stylish-animation" sm-tween="mainScene" duration="1" to-vars="{opacity: 1, yoyo: true, repeat: 5}">
<h1>Look at me go</h1>
</div>
</body>
Well it depends on how the AMAZING ANIMATION HANDLED BY ANGULARJS is organized...
But you could for example use ScrollMagic's events to run a callback that handles the angular animation.
For example like this:
var scene = new ScrollScene({
triggerElement: '#animation_start'
}).on("enter", amazingCallback);
In that callback you could trigger the animations.
The PROPER AngularJS way though would be this:
You'd need to write a module that uses directives that allow you to supply all options of a scene (and controller) as attributes of an element (i.e. your trigger element) and internally creates ScrollMagic objects accordingly.
That's a big challenge and if you decide to get into that, please share your results, because a plugin like this is on the long-term TODO list of ScrollMagic.
Mind that ScrollMagic 2.0 (currently in BETA) features a plugin architecture.
Alternatively you can have a look at skrollr which uses data-attributes to configure its animations and thus is already a lot closer to "the angular way".
Related
I'm developing a PhoneGap/Cordova application with AngularJS. Since my target platform is Android I looked into different approaches for activity transitions. In other words; How to animate the transition between form A and form B while providing a native and intuitive user experience.
My application will be implementing the material design guidelines and I stumbled upon a transition animation called "shared element transition" which I think would work perfectly for most of my application flows.
I actually really like this approach and was wondering about how to achieve an implementation based on Angular 1.5 which is as generic and flexible as possible and easy to use across the application.
Since I'm still new to AngularJS, I wanted to check back with the community to find a neat way to implement something along the lines of the shared element transition or maybe get pointed to an already existing implementation.
For those wondering, I'm using Angular 1.5 and MaterializeCSS to empower my app. Thank you very much!
Check this tutorial (ready made component to use as well), it animates hero elements between different views and maintains proper routes.
http://blog.scottlogic.com/2014/12/19/angular-hero-transitions.html
To summarize, the hero element has to exist between the two views being transitioned. When transitioning, the hero element is temporarily hidden in the target view till the position animation ends. If the target view is being loaded directly (refresh, bookmark), no animation takes place and the hero element is there.
Recently I was looking for an framework that I can use together with jointjs. So far I tried react/angular/angular2.
I do wanna try out it with Cycle.js. But putting them together so 'old' stuff (jointjs) and cycle.js just overheads me. I know that I should create a driver to interact with jointjs. If someone can help me to get starter with simple example of joint(e.g.: http://www.jointjs.com/tutorial#hello-world) + cycle, that would be amazing.
Basic points that need to be included is:
JointJS required an container NODE element
Whenever users makes some changes (drag&drops elements around or resize them) it will broadcast an event. Something like this:
graph.on('all', function(eventName, cell) {
console.log(arguments);
});
I am looking for a javascript animation framework. I have found some:
http://www.pixijs.com/
http://phaser.io/
http://paperjs.org/
These all are good.
But I would like a GUI based animation creater framework, so that I can create translation, scale and frame animations. That will allow me easily create basic animations without having to write much code.
Something like cocos studio for cocos2d.
If you guys, know any such framework, please let me know. Thanks.
If you need some animations libraries, here are some good ones:
Greensock: https://greensock.com/
Velocity.js: http://julian.com/research/velocity/
If you want to create animations in a GUI, things to consider:
Adobe Edge (paid): https://creative.adobe.com/products/animate
Bouncejs: http://bouncejs.com/
CSS Animate: http://cssanimate.com/
I wrote a very simple library based on request animation frame that can basically animate anything you want as it only returns number values over specified time according to the specified easing.
https://github.com/alanbo/animate.js
I have created one, which is very simple and small
https://github.com/allenhwkim/jsanimation
Usage
import {slideInRight} from 'jsanimation';
slideInRight(el);
I am developing a simple website for a client using Rails and I want to give them an easy way to create and manage their top navigation menu. Wordpress has a great tool (see example below) for this but I haven't found anything like it that is generally available.
So far I am thinking that Jquery Sortable would be the best place to start but to make it handle nested data (like trees), adding and removing elements, and add rules such as limiting the depth of nested elements seems like a lot of work.
How have you guys gone about solving this problem?
Have you tried this
You can initialize like
$(function () {
$("ol").sortable()
})
It also supports animation.
You can also take a look into the alternatives provided
I'm switching from using JQM and Phonegap to using Topcaot and a few smaller libraries to take care of transitions and such. One thing I haven't found a micro-library for is the navigation.
While many site I've seen say to create the UI and content dynamically through javascript, it does seem like a daunting task do to the amount of pages I would need to create. Similar to JQM, I want to be able to separate my different pages as different html files that ajax load them into the DOM, but in an optimized way that is fast and doesn't cary the weight of JQM.
TO anyones knowledge does such a library exist or would this be a library I would have to write? It doesn't seem like it would be an overly complicated task, especially if I would use jquery. Any ideas of help is appreciated.
try angularjs. Here there's an example with topcoat: http://coenraets.org/blog/2013/11/sample-mobile-application-with-angularjs/
Angularjs is very different from JQM but you should give it a try.
Otherwise, if you don't like angularjs you can find a more traditional approach at this page: http://coenraets.org/blog/2013/03/hardware-accelerated-page-transitions-for-mobile-web-apps-phonegap-apps/
Hope this helps
Here you are - new plugin based on coenraets css transitional solution: https://github.com/linslin/pagingSlider
Features:
Paging with pagingSlider
default pageSlider actions
Pagebrowser
Totaly plugable like pageSlider
if you want, pagemenu to switch directly to a page
touch events
Consider looking at Topcoat Touch (Github Project), it is basically a micro library for transitions and events (5k minified and gzipped) -- full disclosure, I am the author of Topcoat Touch.
It is a very simple framework that uses Topcoat to create the UI, inspired by jQT and to a lesser extent jQuery Mobile. It can be either a single html document with multiple pages contained within the same document, or using a collection of controllers and templates. It uses a collection of optional libraries to provide most of the functionality for a mobile framework and has a generator for Yeoman to get the scaffolding up quickly.
I haven't used it, but Kendo UI Mobile is similar to JQM and may fit your needs: http://www.kendoui.com/mobile.aspx