We Keep Coding

Scrollmagic video animation in webpack (BigCommerce)

I am trying to achieve a video animation with scrollmagic.
Desired outcome is that, the video plays based on the user scroll position.
export default function magic() {
//MAIN
var controller = new ScrollMagic.Controller();
// SceneOne animation
const $video = $('#soVideo');
let sceneOne = new ScrollMagic.Scene({
duration: 9000,
triggerElement: '#trigger1',
triggerHook: 0
})
.setPin('#trigger1')
.addIndicators()
.addTo(controller);
// SceneOne animation
let accelamount = 0.1;
let scrollpos = 0;
let delay = 0;
sceneOne.on('update', e => {
scrollpos = e.scrollPos / 1000;
});
setInterval(() => {
delay += (scrollpos - delay) * accelamount;
$video.currentTime = delay;
console.log(delay);
}, 33.36);
}
The problem is, I cannot get it working, the video stays static at scroll.
I am trying to do this for a product page, not sure what am I doing wrong.
Thanks for any tips!

Ok figured it out. Works now:
export default function magic() {
const intro = document.querySelector(".video-section");
const video = intro.querySelector('.video_zero');
const text = intro.querySelector('.intro-text');
var controller = new ScrollMagic.Controller();
// SceneOne animation
let sceneOne = new ScrollMagic.Scene({
duration: 9500,
triggerElement: intro,
triggerHook: 0
})
.setPin(intro)
.addIndicators()
.addTo(controller);
// SceneOne animation
let accelamount = 0.1;
let scrollpos = 0;
let delay = 0;
sceneOne.on('update', e => {
scrollpos = e.scrollPos / 1000;
});
setInterval(() => {
delay += (scrollpos - delay) * accelamount;
video.currentTime = delay;
}, 33.3);
}

ScrollMagic + SmoothScroll stuttering

So I've created a smooth scroll effect on my website, works nice, but I'm having an issue with Scrollmagic. When scrolling down, I'm translating elements, but it stutters. A lot. When I disable my smooth scroll script, everything works fine again.
BTW : I'm using Webpack and GSAP for the animations.
My guess is Scrollmagic isn't aware of the animation so it's using the end value, not the current one. But I can't find out how to fix this
Here is my smooth scroll :
import { TweenLite } from 'gsap';
const html = document.documentElement;
const body = document.body;
const scroller = {
target: document.querySelector('.scroll-container'),
ease: 0.1, // <= scroll speed
endY: 0,
y: 0,
resizeRequest: 1,
scrollRequest: 0,
};
let requestId = null;
TweenLite.set(scroller.target, {
rotation: 0.01,
force3D: true,
});
window.addEventListener('load', onLoad);
function onLoad() {
updateScroller();
window.focus();
window.addEventListener('resize', onResize);
document.addEventListener('scroll', onScroll);
}
function updateScroller() {
const resized = scroller.resizeRequest > 0;
if (resized) {
const height = scroller.target.clientHeight;
body.style.height = `${height}px`;
scroller.resizeRequest = 0;
}
const scrollY = window.pageYOffset || html.scrollTop || body.scrollTop || 0;
scroller.endY = scrollY;
scroller.y += (scrollY - scroller.y) * scroller.ease;
if (Math.abs(scrollY - scroller.y) < 0.05 || resized) {
scroller.y = scrollY;
scroller.scrollRequest = 0;
}
TweenLite.set(scroller.target, {
y: -scroller.y,
});
requestId = scroller.scrollRequest > 0 ? requestAnimationFrame(updateScroller) : null;
}
function onScroll() {
scroller.scrollRequest += 1;
if (!requestId) {
requestId = requestAnimationFrame(updateScroller);
}
}
function onResize() {
scroller.resizeRequest += 1;
if (!requestId) {
requestId = requestAnimationFrame(updateScroller);
}
}
And the Scrollmagic part :
import $ from 'jquery';
import * as ScrollMagic from 'scrollmagic';
import { TweenMax, TimelineMax, Power0 } from 'gsap';
import { ScrollMagicPluginGsap } from 'scrollmagic-plugin-gsap';
ScrollMagicPluginGsap(ScrollMagic, TweenMax, TimelineMax);
const controller = new ScrollMagic.Controller();
$('.big-outline-text').each(function() {
const tl = new TimelineMax();
const child = $(this);
if ($(this).hasClass('right-to-left')) {
tl.to(child, 2, { x: -300, ease: Power0.easeInOut });
} else if ($(this).hasClass('left-to-right')) {
tl.fromTo(child, 2, { x: -300 }, { x: 0, ease: Power0.easeInOut }, '+=1');
}
const scene = new ScrollMagic.Scene({
triggerElement: this,
triggerHook: 0.9,
duration: '110%',
})
.setTween(tl)
.addTo(controller);
});
$('.bottom-to-top').each(function() {
const tl2 = new TimelineMax();
const child = $(this);
if ($(this).hasClass('bottom-to-top')) {
tl2.fromTo(child, 2, { y: -300 }, { y: 100, ease: Power0.easeInOut });
}
const scene = new ScrollMagic.Scene({
triggerElement: this,
triggerHook: 0.9,
duration: '220%',
})
.setTween(tl2)
.addTo(controller);
});
I'm sure i'm not the first one having this problem, but i couldn't find any answer.

I managed to solve my issue with a refresh function for the scrollbar. Like in this codepen https://codepen.io/emraher/pen/GPRJEZ?editors=1010
They set the scrollbar and the scrollmagic scene as vars, and then this little gem
var elem = document.querySelector(".content");
var scrollbar = Scrollbar.init(elem)
scrollbar.addListener(() => {
scene.refresh()
})

how to fix the script?

https://jsfiddle.net/fnethLxm/10/
$(document).ready(function() {
parallaxAuto()
});
function parallaxAuto() {
var viewer = document.querySelector('.viewer.active'),
frame_count = 5,
offset_value = 500;
// init controller
var controller = new ScrollMagic.Controller({
globalSceneOptions: {
triggerHook: 0,
reverse: true
}
});
// build pinned scene
var scene = new ScrollMagic.Scene({
triggerElement: '#sticky',
duration: (frame_count * offset_value) + 'px',
reverse: true
})
.setPin('#sticky')
//.addIndicators()
.addTo(controller);
// build step frame scene
for (var i = 1, l = frame_count; i <= l; i++) {
new ScrollMagic.Scene({
triggerElement: '#sticky',
offset: i * offset_value
})
.setClassToggle(viewer, 'frame' + i)
//.addIndicators()
.addTo(controller);
}
$(".right_arrr").click(function(){
var block = $(this).siblings('.secondSlider');
el = block.find(".active");
elNum = el.attr("data-num");
if(elNum < block.find('.slide').length) {
elNum++;
} else {
elNum=1;
}
hideShow(elNum, block);
alert('slide №' + elNum)
scene = scene.destroy(true);
scene = null;
controller.destroy(true);
controller = null;
parallaxAuto();
});
$(".left_arrr").click(function(){
var block = $(this).siblings('.secondSlider');
el = block.find(".active");
elNum = el.attr("data-num");
if(elNum > 1) {
elNum--;
} else {
elNum=block.find('.slide').length;
}
hideShow(elNum, block);
scene = scene.destroy(true);
scene = null;
controller.destroy(true);
controller = null;
parallaxAuto();
});
function hideShow(num, block) {
block.find("div.active").removeClass("active").animate({ opacity: 0,},300);
block.find("div.slide"+num).addClass("active").animate({ opacity: 1,},300);
}
};
You can see that on 1 and 2 slide plugin work out fine, but on slide 3 it does not work. and error "Cannot read property 'destroy' of null"
A few days longer I sit and I can not understand
how to fix this?

I see 2 issues:
you're setting the scene and the controller to null on every right/left click, and require re-init of it re-calling parallaxAuto;
every time you call parallaxAuto you re-bind the listeners.
I took the freedom to rewrite it for you so the listeners will be bound only once: https://jsfiddle.net/j6u6wp7x/. I just isolated the part in which you re-init the controller and the scene so you can call it at the end of the click without re-binding the events.

How to remove a tween with createjs

I have a clock hand that rotates as a timer. If the user completed activity before the time runs out I need to stop that tween.
I tried remove tween with no luck. What am I doing wrong?
I get into my levelup function but the remove tween does not work.
function Clock() {
// this.board = board;
clockContainer = new createjs.Container();
contain = new createjs.Container();
var clockBack = new createjs.Bitmap(queue.getResult("clockBack"));
clockHand = new createjs.Bitmap(queue.getResult("clockHand"));
clockBack.x = 40;
clockBack.y = 480;
clockHand.x = 95;
clockHand.y = 539;
clockHand.regX = 20
clockHand.regY = 105;
clockHand.scaleX = clockHand.scaleY = 0.50;
clockBack.scaleX = clockBack.scaleY = 0.50;
clockContainer.addChild(clockBack, clockHand);
TimerLength = 30000;
stage.addChild(clockContainer)
mytweentodisable = createjs.Tween.get(clockHand, { loop: false }).to({ rotation: 360 }, TimerLength).call(function () {
//this will trigger the timer is up
GamehasEnded = true;
checkWrongAndRight();
});
}
function levelUp() {
createjs.Tween.removeTweens(mytweentodisable)
console.log("adding Level up button");
levelUpContainer = new createjs.Container();
levelUpIcon = new createjs.Bitmap(queue.getResult("levelUp"));
levelUpContainer.addChild(levelUpIcon);
stage.addChild(levelUpContainer)
levelUpContainer.x = 350
levelUpContainer.y = 500
levelUpContainer.addEventListener("click", function () {
console.log("clicked it");
});
}

This should do the trick:
mytweentodisable.setPaused(true);

I want to create a jigsaw puzzle in my website using html / javascript

http://jsfiddle.net/Darbicus/VBeGF/
I want to add a small puzzle to website
but the shown code in the fiddle is not taking for the whole image,its taking only small part of the image,can any one give the solution please
Here is the code
function drawImage(imageObj) {
var piecesArray=new Array();
var horizontalPieces = 3;
var verticalPieces = 3;
var imageWidth = imageObj.width;
var imageHeight = imageObj.height;
var pieceWidth = Math.round(imageWidth/horizontalPieces);
var pieceHeight = Math.round(imageHeight/verticalPieces);
var stage = new Kinetic.Stage({
container: "container",
width: window.innerWidth,
height: window.innerHeight
});
var layer = new Kinetic.Layer();
for(i=0;i<horizontalPieces;i++){
piecesArray[i]=new Array();
for(j=0;j<verticalPieces;j++){
piecesArray[i][j] = new Object();
piecesArray[i][j].right=Math.floor(Math.random()*2);
piecesArray[i][j].down=Math.floor(Math.random()*2);
if(j>0){
piecesArray[i][j].up=1-piecesArray[i][j-1].down;
}
if(i>0){
piecesArray[i][j].left=1-piecesArray[i-1][j].right;
}
piecesArray[i][j].shape=new Kinetic.Shape({
drawFunc: function(i,j,pieceWidth,pieceHeight,tileObj){
return function(canvas) {
var x8=Math.round(pieceWidth/8);
var y8=Math.round(pieceHeight/8);
var context = canvas.getContext();
context.beginPath();
context.moveTo(0,0);
if(j!=0){
context.lineTo(3*x8,0);
if(tileObj.up==1){
context.quadraticCurveTo(2*x8,-2*y8,4*x8,-2*y8);
context.quadraticCurveTo(6*x8,-2*y8,5*x8,0);
}
else{
context.quadraticCurveTo(2*x8,2*y8,4*x8,2*y8);
context.quadraticCurveTo(6*x8,2*y8,5*x8,0);
}
}
context.lineTo(8*x8,0);
if(i!=horizontalPieces-1){
context.lineTo(8*x8,3*y8);
if(tileObj.right==1){
context.quadraticCurveTo(10*x8,2*y8,10*x8,4*y8);
context.quadraticCurveTo(10*x8,6*y8,8*x8,5*y8);
}
else{
context.quadraticCurveTo(6*x8,2*y8,6*x8,4*y8);
context.quadraticCurveTo(6*x8,6*y8,8*x8,5*y8);
}
}
context.lineTo(8*x8,8*y8);
if(j!=verticalPieces-1){
context.lineTo(5*x8,8*y8);
if(tileObj.down==1){
context.quadraticCurveTo(6*x8,10*y8,4*x8,10*y8);
context.quadraticCurveTo(2*x8,10*y8,3*x8,8*y8);
}
else{
context.quadraticCurveTo(6*x8,6*y8,4*x8,6*y8);
context.quadraticCurveTo(2*x8,6*y8,3*x8,8*y8);
}
}
context.lineTo(0,8*y8);
if(i!=0){
context.lineTo(0,5*y8);
if(tileObj.left==1){
context.quadraticCurveTo(-2*x8,6*y8,-2*x8,4*y8);
context.quadraticCurveTo(-2*x8,2*y8,0,3*y8);
}
else{
context.quadraticCurveTo(2*x8,6*y8,2*x8,4*y8);
context.quadraticCurveTo(2*x8,2*y8,0,3*y8);
}
}
context.lineTo(0,0);
canvas.fillStroke(this);
}
}(i,j,pieceWidth,pieceHeight,piecesArray[i][j]),
fillPatternImage:imageObj,
x:-pieceWidth*i,
y:-pieceHeight*j,
stroke: "#000000",
strokeWidth: 4,
lineCap: "round",
rotation : Math.PI * 0.5 * Math.floor(Math.random() * 4),
draggable: true,
offset: [pieceWidth/2,pieceHeight/2],
x: pieceWidth*i+pieceWidth/2 + (Math.random()*2)*((stage.getWidth()+pieceWidth)/20),
y: pieceHeight*j+pieceHeight/2 + (Math.random()*2)*((stage.getHeight()+pieceHeight)/20),
});
piecesArray[i][j].shape.on("mousedown", function(){
this.moveToTop();
});
piecesArray[i][j].shape.on("click", function(){
this.moveToTop();
this.rotateDeg(90)
layer.draw();
});
layer.add(piecesArray[i][j].shape);
}
}
stage.add(layer);
}
var jigsaw = function() {
var imageObj = new Image();
imageObj.src = "https://dl.dropboxusercontent.com/s/n9wrfvy9h4p5ufs/kidwallpaper.jpg";
imageObj.onload = function () {
drawImage(this);
}
}
jigsaw();