We Keep Coding

Using Bodymovin and Scrollmagic to animate as you scroll

I am using Bodymovin in combination with ScrollMagic and GSAP to animate through series of images as you scroll back and forth. Everything works great, except, when I reach the end it doesn't stay on the final image, but goes white.
Libraries that I load first:
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js"></script>
Then my code:
var controller = new ScrollMagic.Controller();
var animation = bodymovin.loadAnimation({
container: document.getElementById('hero-anim'),
animationData: animationframes,
renderer: 'svg',
autoplay: false,
});
var tl = new TimelineMax();
tl.to({frame:0}, 1, {
frame: animation.totalFrames-1,
onUpdate:function(){
animation.goToAndStop((Math.round(this.progress() * 60)), true)
},
ease: Linear.easeNone
})
var lottieScene = new ScrollMagic.Scene({
duration: '100%',
offset: 600
})
.setPin("#hero-anim")
.setTween(tl)
.addTo(controller);
Any ideas what could be causing that? Looking at browser's Inspect Element, it basically adds display:block to the image that is supposed to be currently visible and applies display:none to the previous image, but at the end, they all have display:none, and it doesn't stay visible

RESOLVED
As Zach pointed out, I tried Math.floor and at first it didn't help, but afterwards I tried adjusting animation.goToAndStop((Math.floor(this.progress() * 60)), true) to * 59 (one frame less than the total frame count and now it works, perfectly. Math.round with * total frame count or even * total frames - 1 didn't work, strangely.

How to add wordpress feature image dynamiclly in jQuery Zoomer

I have purchase the Megazoom Image Viewer and want to add featured image dynamically in Megazoom Image Viewer jQuery script bellow, Please help me how can I use this script, here is the script of jQuery.
<div id="productHolder"></div>
<script type="text/javascript">
var megazoom;
FWDUtils.onReady(function(){
init();
setupZoomer("round_silver_graphics/imageToZoom.jpg", "megazoomPlayList", "round_silver_graphics/navigatorImage.jpg", 4324, 2530);
});
function setupZoomer(imagePath, playListAndSkinId, navigatorImagePath, imageWidth, imageHeight){
if(megazoom){
megazoom.destroy();
megazoom = null;
}
megazoom = new FWDMegazoom({
//----main----//
parentId:"productHolder",
playListAndSkinId:playListAndSkinId,
displayType:"responsive",
skinPath:"skin_round_silver/skin/",
imagePath:imagePath,
preloaderText:"Loading image...",
useEntireScreen:"yes",
addKeyboardSupport:"yes",
addDoubleClickSupport:"yes",
imageWidth:imageWidth,
imageHeight:imageHeight,
zoomFactor:1.4,
doubleClickZoomFactor:1,
startZoomFactor:"default",
panSpeed:8,
zoomSpeed:.1,
backgroundColor:"#FFFFFF",
preloaderFontColor:"#585858",
preloaderBackgroundColor:"#FFFFFF",
//----lightbox-----//
lightBoxWidth:800,
lightBoxHeight:550,
lightBoxBackgroundOpacity:.8,
lightBoxBackgroundColor:"#000000",
//----controller----//
buttons:"moveLeft, moveRight, moveDown, moveUp, scrollbar, hideOrShowMarkers, hideOrShowController, info, fullscreen",
buttonsToolTips:"Move left, Move right, Move down, Move up, Zoom level: , Hide markers/Show markers, Hide controller/Show controller, Info, Full screen/Normal screen",
controllerPosition:"bottom",
inversePanDirection:"yes",
startSpaceBetweenButtons:10,
spaceBetweenButtons:10,
startSpaceForScrollBarButtons:20,
startSpaceForScrollBar:6,
hideControllerDelay:3,
controllerMaxWidth:800,
controllerBackgroundOpacity:1,
controllerOffsetY:3,
scrollBarOffsetX:0,
scrollBarHandlerToolTipOffsetY:4,
zoomInAndOutToolTipOffsetY:-4,
buttonsToolTipOffsetY:0,
hideControllerOffsetY:2,
buttonToolTipFontColor:"#585858",
//----navigator----//
showNavigator:"yes",
navigatorImagePath:navigatorImagePath,
navigatorPosition:"topright",
navigatorOffsetX:6,
navigatorOffsetY:6,
navigatorHandlerColor:"#FF0000",
navigatorBorderColor:"#FFFFFF",
//----info window----//
infoWindowBackgroundOpacity:.6,
infoWindowBackgroundColor:"#FFFFFF",
infoWindowScrollBarColor:"#585858",
//----markers-----//
showMarkersInfo:"no",
markerToolTipOffsetY:2,
//----context menu----//
showScriptDeveloper:"no",
contextMenuLabels:"Move left, Move right, Move down, Move up, Zoom in/Zoom out, Hide markers/Show markers, Hide controller/Show controller, Info, Full screen/Normal screen",
contextMenuBackgroundColor:"#d1cfcf",
contextMenuBorderColor:"#8f8d8d",
contextMenuSpacerColor:"#acacac",
contextMenuItemNormalColor:"#585858",
contextMenuItemSelectedColor:"#FFFFFF",
contextMenuItemDisabledColor:"#b7b4b4"
});
}
</script>

Animating content loaded with Ajax

that i don't know if it's even possible. I wanna try to load content with Ajax, and animate it right away, piece by piece. I have empty body. And on server side i have document with with h1 paragraph and two images. I wanna load them with ajax with animation from different angles (left, top, right, bottom). I know how to animate but as soon as i load them they are already on the page and i want to animate them into the page. Code looks like this:
<body>
<button id="load"></button>
</body>
My jquery script
<script>
$('#load').click(function() {
callAjax();
return false;
});// end of click function
});
function callAjax() {
$.ajax({
type: "POST",
cache: false,
url: 'content.html',
success: function(data){
if(data !== ""){
$("html").prepend(data);
}
},
error: function () {
console.log('error', data);
},
complete: function () {
console.log("done"); }
}); //ajax call
} //document ready
</script>
server side data
<section class="content">
<h1>About</h1>
<p> Text</p>
<img src="ipad.png" class="rotate">
<img src="ipad1.png" class="circle">
</section>

To animate the elements you'd need more than 1 key frame. Currently you only have 1: the end-state. You'd need another one to animate from. Think of a move: to have a character walk on screen you'd have to position them off-screen first.
I'm going to assume we're doing just that: loading your content off-screen, then walking it on-screen.
Set the position for the elements (via CSS, or explicitly, but do so in the original file) off-screen. For example, use this CSS:
position: absolute;
left: -1000;
which would place the element 1000 pixels to the left of the window. That's your starting position, which is where you're going to "start" at after you have loaded the content (asynchronously).
The next part is the transition phase moving them from START to END via a series of intermediate steps computed by your code. There are many robust JS/HTML/CSS/SVG animation libraries, but I'm going to use a basic JS function: setInterval.
var thing = $('#yourThing'); // select your thing
var distInterval = 1000 / 60; // we're going to move 1000px every 60 steps
var code = function() {
thing.position().left = thing.position().left + distInterval; // move by the distance
// destination is an abs position of 100px from the left
if (thing.position().left == 100) {
window.clearInterval(); // stops the loop
}
};
var delay: 16.7; // 1/60th of a second, in ms
var intervalID = window.setInterval(code, delay); // set and start the loop
Once you are comfortable with this concept you'll soon find that this is a poor implementation choice. Some keywords to google for will be the "requestAnimationFrame()" function and the term "easings".

You could hide 'data' and then animate it in.
$(data).hide().fadeIn("slow");

Transition.translate Easing vs SpringTransition

I'm currently experimenting a bit with Famo.us and there is actually one thing I can't yet wrap my head around.
In a small example i tried to create a HeaderFooterLayout, where the header contains a simple icon left aligned. A click on it will bounce it to the right end of the header.
Now with a simple Transform.translate this works not as smooth as expected on my Nexus4 and Nexus 7, but hell changing it to a SpringTransition rocks. Here is the code example:
var Transitionable = require('famous/transitions/Transitionable');
var SpringTransition = require('famous/transitions/SpringTransition');
Transitionable.registerMethod('spring', SpringTransition);
var logoStateModifier = new StateModifier({});
var logo = new ImageSurface({
size: [186, 43],
content: 'images/my-logo.png'
});
var posX = 0;
var adjustment = 20;
// Click event on image
logo.on('click', function() {
if(posX === 0) {
posX = (window.innerWidth - logo.size[0] - adjustment);
} else {
posX = 0;
}
var spring = {
method: 'spring',
period: 10,
dampingRatio: 0.3,
};
// transform translate with Easing
logoStateModifier.setTransform(
Transform.translate(posX,0,0),
{ duration: 1000, curve: Easing.inOutBack}
);
// spring transition
logoStateModifier.setTransform(
Transform.translate(posX, 0, 0), spring
);
});
So what I don't understand here is why Easing is so "slow" compared to the Physics driven SpringTransition?

The spring transition your requesting has a period of 10ms while the easing transition is 1000ms or 100 times slower. I tried your code "as is" and with a modification that compares more apples to apples and the transitions can run at the same speed (both laptop and devices.) First you should note that the minimum spring period is 150ms so the 10ms your asking for is actually 150. Second you are stacking the transitions so that one follows the other. The easing will take 1 second and then the spring will oscillate. You may want to try something slightly different... set the transitions to the following:
// transform translate with Easing
logoStateModifier.setTransform(
Transform.translate(posX,0,0),
{ duration: 150, curve: Easing.inOutBack}
);
// spring transition
logoStateModifier.setTransform(
Transform.translate(0, 0, 0), spring
);
This will behave slightly differently. On click (every other click actually) the logo will cross the screen at high speed and then come back. I expect you'll find that these transitions run at comparable high speeds. Of course for a slower more viewable test you can set the spring period to 1000 and the easing duration to the same and again the speeds should be comparable.

ASP.NET MVC4 - JQuery jqFancyTransitions error: TypeError: $(...).jqFancyTransitions is not a function

I have my Index.cshtml view, and for some reason, the JQuery is having a hard time firing the jqFancyTransitions method (it's acting as if the jqFancyTransitions library isn't included). The JavaScript IS firing though. For testing, I even put $('#rotatingImages').html('blah'); to see if it would find my ID and replace it's HTML contents, but it didn't.
I do get a JS error in my Firebug console: TypeError: $(...).jqFancyTransitions is not a function. Yet, I get jqFancyTransitions intellisense after I type a dot at the end of the parenthesis.
EDIT:
The jqFancyTransitions.js library IS in fact being loaded into the browser according to Firebug. To test it out, I removed the reference to it, and then I didn't see the library was loaded. I added it back in to my view, and I see it.
Here's the code on Index.cshtml:
<script src="~/Scripts/jqFancyTransitions.1.8.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#rotatingImages').jqFancyTransitions({
effect: 'wave', // wave, zipper, curtain
width: 959, // width of panel
height: 300, // height of panel
strips: 20, // number of strips
delay: 4000, // delay between images in ms
stripDelay: 50, // delay beetwen strips in ms
titleOpacity: 0.7, // opacity of title
titleSpeed: 1000, // speed of title appereance in ms
position: 'alternate', // top, bottom, alternate, curtain
direction: 'fountainAlternate', // left, right, alternate, random, fountain, fountainAlternate
navigation: false, // prev and next navigation buttons
links: false // show images as links
});
// $('#rotatingImages').html('blah'); // just for testing
});
</script>
<div id="rotatingImages">
<img src="Images/Background/bg1.jpg" />
<img src="Images/Background/bg2.jpg" />
<img src="Images/Background/bg3.jpg" />
<img src="Images/Background/bg4.jpg" />
</div>
Any ideas what's going on?

I believe your JavaScript reference needs to be changed to
<script src="#Url.Content("~/Scripts/jqFancyTransitions.1.8.js")"></script>
for Razor ViewEngine, or
<script src="<%=Url.Content("~/Scripts/jqFancyTransitions.1.8.js")%>"></script>
for WebForms ViewEngine.

Real simple. All I had to do was include my scripts in a "scripts" section inside the view I was working in, which was Index.cshtml, as follows:
#section scripts
{
#Scripts.Render("~/bundles/fancyTransitions")
<script type="text/javascript">
$(document).ready(function () {
$('#rotatingImages').jqFancyTransitions({
effect: 'wave', // wave, zipper, curtain
width: 959, // width of panel
height: 300, // height of panel
strips: 20, // number of strips
delay: 4000, // delay between images in ms
stripDelay: 50, // delay beetwen strips in ms
titleOpacity: 0.7, // opacity of title
titleSpeed: 1000, // speed of title appereance in ms
position: 'alternate', // top, bottom, alternate, curtain
direction: 'fountainAlternate', // left, right, alternate, random, fountain, fountainAlternate
navigation: false, // prev and next navigation buttons
links: false // show images as links
});
});
</script>
}

I thing u forgot to link jQuery library on the top. before
<script src="~/Scripts/jqFancyTransitions.1.8.js"> </script>