ScrollMagic
The javascript library for magical scroll interactions.
ScrollMagic ♥ Demo scrollmagic - the javascript library for magical scroll interactions.
scrollmagic helps you to easily react to the user's current scroll position.
The question
Is there a way to fade contents out on a gradient similar to clip-mask using JavaScript or jQuery?
The problem
I've got a fixed header with a transparent background, and a '.png' logo with transparent pieces. I have semi-transparent elements which scroll vertically up the page, and thus below the header and logo.
When things scroll under the logo they show through and everything looks pretty bad.
The proposed solution
We'd like to fade out content above a certain point (the bottom of the header). We're using ScrollMagic with GSAP to animate elements as they scroll which causes conflicts with clip-path and other CSS fixes, so I am looking for a JavaScript/jQuery fix most likely.
Sample code
At the request of a commenter, I've created a JSFiddle which includes a few pieces.
There are two elements that should be considered: #masthead and #content. There's an area (in blue) below #masthead in which I would like #content to fade as a gradient from opacity 1 to 0.
https://jsfiddle.net/dotzak/o9hcnufe/3/
Source: (StackOverflow)
I'm trying to create a simple timelineMax with GSAP and scrollMagic, I'm getting the following error. Everything looks right to me so I'm not understanding this error.
Uncaught TypeError: Cannot read property 'repeat' of undefined
d.to @ TweenMax.min.js:14
(anonymous function) @ app.js:12
Line 12 is .to("#parallax1 > div", {y: "80%", ease: Linear.easeNone}); below.
Here's the code:
// init controller
var controller = new ScrollMagic.Controller({globalSceneOptions: {triggerHook: "onEnter", duration: "200%"}});
// build scenes
// build tween1
var tween1 = new TimelineMax();
tween1.to("#parallax1 > div", {y: "80%", ease: Linear.easeNone});
var scene = new ScrollMagic.Scene({triggerElement: "#parallax1"})
.setTween(tween1)
.addIndicators()
.addTo(controller);
(I know there's no duration param in that tween, but if you look at http://janpaepke.github.io/ScrollMagic/examples/advanced/parallax_sections.html you can see that there's no duration parameter on their setTween and it works just fine).
Source: (StackOverflow)
I am using Scroll Magic JS. My goal is to take my HTML5 video (below) and use the pin method to make it stick in the background while text scrolls over the top of it.
<video preload="auto" autoplay="autoplay" loop="loop" id="bgvid">
<source src="../../pictures/coding.mp4" type="video/mp4">
</video>
My Javascript:
var scene_statement = new ScrollScene({triggerElement: "#trigger5", duration: 400})
.setPin("#bgvid")
.addTo(controller);
When I do not include the javascript the video works perfectly (obviously not pinning though) and when I use the javascript on an image instead of a video the pinning works perfectly.
When I use the javascript with the video, the video still appears, and it pins, but it does not play. Does anyone know how to overcome this?
Thanks
Source: (StackOverflow)
Trying to use GreenSock / ScrollMagic JS to animate a div on a page. I want to fire a second animation on my animation box after the first tween has completed. So move the box down 300px, then move it left 300px. How would I go about adding a tween sequence. My codepen for this is -
http://codepen.io/anon/pen/HfFwJ
The JS I'm using is -
// init the controller
var controller = new ScrollMagic({
globalSceneOptions: {
triggerHook: "onLeave"
}
});
// pinani
var pinani = new TimelineMax()
// panel slide translateX
.add(TweenMax.to("#slide-dos", 1, {top: "150px"})) // panel slide top
.add(TweenMax.to("#slide-dos", 1, {left: "500px"})) // panel slide left
.add(TweenMax.from( $('#slide-dos'), 0.5, {css:{scale:0.05, opacity:0, top: "100px"}, ease:Quad.easeInOut }));
// panel section pin
new ScrollScene({
triggerElement: "section#pin",
duration: 1100
})
.setTween(pinani)
.setPin("section#pin")
.addTo(controller);
The structure for my HTML -
<div class="row">
<div class="large-12 columns"></div>
</div>
<section id="pin" class="scroll-magic-section">
<div id="spacer">
<div class="row">
<div class="large-12 columns">
<div id="slide-banner">
<div class="container">
<h3>Banner</h3>
</div>
</div>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<div id="slide-pre">
<div class="container">
<h3>Pre-Animation</h3>
</div>
</div>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<div id="slide-dos">
<div class="container">
<h3>Animation Box</h3>
</div>
</div>
</div>
</div>
</section>
So in brief I want to animate slide-dos so that it adds left:300px after its completed its top:300px.
Any help greatly appreciated! :)
DIM3NSION
Source: (StackOverflow)
I'm experimenting with parallax and scrollmagic. In the parallax example from the scrollmagic demo I'm trying to animated content in the first parallax section.
Here's a fiddle of my experiment.
I can't get the letter A in #box to move how I want it. I'd tried adding a bounding box and using that as the triggerElement, that did not work.
On scrolldown it should move down 150px and fade out. Right now it's using "#parallax1" as its triggerElement and is fading out once it reaches the bottom of that section. I want it to fade out before the bottom of that section. How do I get it to do that?
What am I doing wrong?
//////////////////////////////////////////////////////
//////////// //// Parallax Animation ////////////
//////////////////////////////////////////////////////
// init controller
var controller = new ScrollMagic.Controller({
globalSceneOptions: {
triggerHook: "onEnter",
duration: "200%"
}
});
// build scenes
// build tween1
var tween1 = new TimelineMax();
tween1.to("#parallax1 > div", 1, {
y: "80%",
ease: Linear.easeNone
});
var scene = new ScrollMagic.Scene({
triggerElement: "#parallax1"
})
.setTween(tween1)
.addIndicators()
.addTo(controller);
new ScrollMagic.Scene({
triggerElement: "#parallax1"
})
.setTween("#box", 0.10, {
alpha: 0,
yPercent: 0,
y: "800%",
ease: Linear.easeNone
})
.addIndicators()
.addTo(controller);
new ScrollMagic.Scene({
triggerElement: "#parallax2"
})
.setTween("#parallax2 > div", {
y: "80%",
ease: Linear.easeNone
})
.addIndicators()
.addTo(controller);
new ScrollMagic.Scene({
triggerElement: "#parallax3"
})
.setTween("#parallax3 > div", {
y: "80%",
ease: Linear.easeNone
})
.addIndicators()
.addTo(controller);
/////---- End Parallax Animation ---------------------------------------------->>
Source: (StackOverflow)
I'm using scrollmagic to animate objects while scrolling and I get this error:
Uncaught TypeError: Cannot assign to read only property '_gsTweenID'
of #design-principles
my JS code:
var scale_tween = TweenMax.to('#design-principles', 1, {
transform: 'scale(.75)',
ease: Linear.easeNone
});
controller = new ScrollMagic();
var scale_scene = new ScrollScene({
triggerElement: '#style-and-performance'
}).setTween(scale_tween);
controller.addScene([
scale_scene
]);
Source: (StackOverflow)
I’m trying to get a website working with requirejs, based on the use-init boilerplate. It works fine in most systems and in most of the browsers. But it fails (combined with ‘scrollmagic’, ‘fullpage.js’ and other script) in safari on random system versions (iMac, MBP) and random Safari versions (occurred in Safari 6, 7 and 8). In this case the browser just showed a couple of elements, struggled while scrolling and crashed after time.
update: It works for tested devices in uncompressed, but not in the build version (r.js)
While I don’t know the reason for this behavior, I try to catch every mistake. I don’t know if the wrong behavior results from my lack of knowledge, if I do something completely wrong or if there is a bug inside one of the used tools. So I want to ask you – do you have any hints for me?
I’m not sure about the right implementation of plugins in requirejs. I think I got the right use for ‘scrollmagic’, but I’m not sure about ‘fullpage.js’. Is it possible to write a module-like use of ‘fullpage.js’ or is the use right as per particulars given below? Already studied the documentations, since I use all the stuff the first time, I would appreciate any help!
Best regards
Jakob
—
http://jakob.grommas.com/bt/
http://jakob.grommas.com/bt-raw/
In case of doing something wrong, here a detailed strip down for config, main and modules.
config.js :
require.config({
deps: ['plugins/console', 'main'],
paths: {
domReady: '../components/domReady/domReady',
TweenMax: '../components/ScrollMagic/js/_dependent/greensock/TweenMax.min',
TweenLite: '../components/ScrollMagic/js/_dependent/greensock/TweenLite.min',
TimelineMax: '../components/ScrollMagic/js/_dependent/greensock/TimelineMax.min',
jquery: '../components/jquery/dist/jquery.min',
fullPage: '../components/fullpage.js/jquery.fullPage.min',
scrollMagic: '../components/ScrollMagic/js/jquery.scrollmagic',
lazySizes: '../components/lazysizes/lazysizes.min',
viewportUnits: '../components/viewport-units-buggyfill/viewport-units-buggyfill'
},
shim: {
'fullPage': ['jquery'],
'scrollMagic': ['jquery', 'TweenMax'],
'TweenMax': {
deps: ['jquery'],
exports: 'TweenMax'
}
},
// Prevent caching issues, by adding an additional URL argument
urlArgs: 'bust=' + (new Date()).getDate()
});
main.js :
require(['lazySizes']);
require(['viewportUnits']);
require(['modules/fullpage']);
require(['domReady', 'modules/scrollmagic.controller', 'modules/scrollmagic.scene'], function(domReady, Controller, Scenes) {
'use strict';
domReady(function () {
Controller.getController().addScene([
Scenes.getScene00(),
Scenes.getScene01()
//...
]);
});
});
modules/fullpage.js :
define([
// Dependencies of the module
'domReady',
'jquery',
'fullPage'
], function (domReady, $) {
// Strict mode to prevent sloppy JS
'use strict';
domReady(function () {
// This function is called once the DOM is ready.
// It will be safe to query the DOM and manipulate
// DOM nodes in this function.
var indexAll = {},
getSectionIndex = $('section').length,
currentSlide;
$("#viewport").fullpage({
sectionSelector: 'section',
slideSelector: 'article',
menu: '#menu',
anchors: ['example1', 'example2', 'example3'],
autoScrolling: false,
keyboardScrolling: true,
continuousVertical: true,
loopHorizontal: true,
scrollingSpeed: 800,
verticalCentered: false,
easing: 'easeInQuart',
css3: false,
fixedElements: '.pinContainer',
slidesNavigation: false,
afterRender: function(){
// do nothing
},
afterLoad: function(anchorLink, index){
currentSlide = indexAll[index];
if (index === 1) {
// do this
} else {
// do that
}
if (index > 2 && index < getSectionIndex - 1) {
// do this
if (index === 3 || index === getSectionIndex - 2) {
// do this
} else {
// do that
}
} else {
// do that
}
var ignoreThisShit = anchorLink; // DIRTY HACK
ignoreThisShit = 'ignoreThisShit'; // DIRTY HACK
},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
var currentSlideIndex = slideIndex + 1;
indexAll[index] = currentSlideIndex;
if (index > 3 < getSectionIndex - 3) {
// do this
} else {
// do that
}
var ignoreThisShit = anchorLink; // DIRTY HACK
ignoreThisShit = slideAnchor; // DIRTY HACK
ignoreThisShit = 'ignoreThisShit'; // DIRTY HACK
}
});
});
});
modules/scrollmagic.controller.js :
define([
// Dependencies of the module
'jquery',
'scrollMagic'
], function ($, ScrollMagic) {
// Strict mode to prevent sloppy JS
'use strict';
// Private variables
var _controller = new ScrollMagic.Controller();
// Public API
return {
// Getter for private variable
getController: function () {
return _controller;
},
// File an event on initialisation
init: function () {
$(document).trigger(_controller);
}
};
});
modules/scrollmagic.scene.js :
define([
// Dependencies of the module
'jquery',
'TweenMax',
'scrollMagic'
], function ($, TweenMax, ScrollMagic) {
// Strict mode to prevent sloppy JS
'use strict';
// private functions
var windowHeight = $(window).innerHeight();
function getWindowHeight() {
return windowHeight;
}
// Private variables
var _scene01 = new ScrollMagic.Scene({
triggerElement: '#section1',
triggerHook: 0,
duration: getWindowHeight
}).setPin($('#pinContent2'));
var _scene02 = new ScrollMagic.Scene({
triggerElement: '#section2',
triggerHook: 1,
duration: getWindowHeight
}).setTween(TweenMax.to('#section1', 1, {backgroundColor: '#000'}));
// Public API
return {
// Getter for private variable
getScene01: function () {
return _scene01;
},
getScene02: function () {
return _scene02;
},
// File an event on initialisation
init: function () {
$(document).trigger(_scene01).trigger(_scene02); // is this right?
}
};
});
Source: (StackOverflow)
I am attempting to make a psuedo-parallax site. I am using the Scrollmagic jquery plugin. My background animations are working fine, but I am having issues with the first text box (living in the grey bar). I have it set to start at opacity:1 and tween to opacity:0. When I load the page, the div container already seems to have the opacity set to .5. What am I doing wrong? I've tried adjusting the duration in TweenMax.to to .5 and I've seen no difference how .text-background is tweening.
The codepen is available here: http://codepen.io/anon/pen/vExZPR
Thank you.
<body>
<div id="container">
<div id="parallax1">
<div style="background-image: url('img/evcbg1.jpg');">
<div id="parallax1_content">
<div class="text-background"><h1>We offer a full line of EPA approved enclosed combustors that meet the ever-changing<br>requirements of today’s regulation-filled oil and gas industry.</h1></div>
</div>
</div>
</div>
<div class="content_box">
<h2>Are you in compliance with the latest EPA tank emission regulations?</h2>
<p>...</p>
</div>
<div id="parallax2">
<div style="background-image: url('img/clouds.jpg')"></div>
</div>
<div class="content_box">
<h2>Are you in compliance with the latest EPA tank emission regulations?</h2>
<p>...</p>
</div>
<div id="parallax3">
<div style="background-image: url('img/clouds.jpg')"></div>
</div>
<div class="content_box">
<h2>Are you in compliance with the latest EPA tank emission regulations?</h2>
<p>...</p>
</div>
<div class="content_box">
<h2>Are you in compliance with the latest EPA tank emission regulations?</h2>
<p>...</p>
</div>
<div class="content_box">
<h2>Are you in compliance with the latest EPA tank emission regulations?</h2>
<p>...</p>
</div>
</div>
<script>
$(document).ready(function(){
//initialize the controller
var controller = new ScrollMagic({globalSceneOptions: {triggerHook: "onEnter", duration: $(window).height()*2}});
//build scenes
new ScrollScene({triggerElement: "#parallax1"})
.setTween(TweenMax.to(".text-background", .1, {opacity: "0", ease: Linear.easeNone}))
.addTo(controller)
.addIndicators({zindex: 1, suffix: "1"});
new ScrollScene({triggerElement: "#parallax1"})
.setTween(TweenMax.from("#parallax1 > div", 1, {top: "-80%", ease: Linear.easeNone}))
.addTo(controller)
.addIndicators({zindex: 1, suffix: "1.BG"});
new ScrollScene({triggerElement: "#parallax2"})
.setTween(TweenMax.from("#parallax2 > div", 1, {top: "-80%", ease: Linear.easeNone}))
.addTo(controller)
.addIndicators({zindex: 999, suffix: "2"});
new ScrollScene({triggerElement: "#parallax3"})
.setTween(TweenMax.from("#parallax3 > div", 1, {top: "-80%", ease: Linear.easeNone}))
.addTo(controller)
.addIndicators({zindex: 999, suffix: "3"});
// show indicators (requires debug extension)
scene.addIndicators();
});
</script>
</body>
Source: (StackOverflow)
I'm new to ScrollMagic and I'm trying to figure out things. I'm working on a site with quite complex animations and I haven't found any tutorial or example on writing effective ScrollMagic code.
I'm not a programmer and have just a basic understanding of jQuery and JavaScript.
I have the following code at this point (I know it's a bit messy):
var controller;
$(document).ready(function($) {
// init controller
controller = new ScrollMagic({
globalSceneOptions: {
reverse: false
}
});
});
$(document).ready(function($) {
var tween = new TimelineMax()
.add( TweenMax.from(".helloHeadline", 1.5, {opacity: 0, ease: Sine.easeOut}), 0 )
.add( TweenMax.from(".helloTxt", 1.5, {opacity: 0, ease: Sine.easeOut}), 0 );
var scene = new ScrollScene({triggerElement: "#hello", duration: 0, offset: 0})
.setTween(tween)
.addTo(controller);
scene.addIndicators();
});
$(document).ready(function($) {
var tween = new TimelineMax()
.add( TweenMax.from(".components .simpleHeadline", 1.5, {opacity: 0, ease: Sine.easeOut}), 0 )
.add( TweenMax.from("#components_bg", 1.25, {scale: 0, ease: Elastic.easeOut}), .5 )
.add( TweenMax.from("#components_rabbit", 1.25, {scale: 0, ease: Elastic.easeOut}), 1 )
.add( TweenMax.from("#components_overlay", 1, {opacity: 0, ease: Sine.easeInOut}), 1.25 );
var scene = new ScrollScene({triggerElement: "#components_graphic", duration: 0, offset: -150})
.setTween(tween)
.addTo(controller);
scene.addIndicators();
});
$(document).ready(function($) {
var tween = TweenMax.from("#magic", 0.5,
{opacity: 0, ease: Quart.easeInOut}
);
var scene = new ScrollScene({triggerElement: "#magic", duration: 400, offset: 0, triggerHook: 1})
.setTween(tween)
.addTo(controller);
scene.addIndicators();
});
$(document).ready(function($) {
var tween = new TimelineMax()
.add( TweenMax.fromTo("#magic_hat", 0.01, {bottom: 800, opacity: 0}, {bottom: 800, opacity: 1}), 0 )
.add( TweenMax.to("#magic_hat", 1, {bottom: "0", ease: Bounce.easeOut}), 0.02 )
.add( TweenMax.from("#magic_hat_shadow", 1, {scale: 0, ease: Bounce.easeOut}), 0.02 )
.add( TweenMax.fromTo("#magic_hand", .75, {opacity: 0}, {opacity: 1, left: 60, top: -10 ,ease: Quart.easeIn}), .75 )
.add( TweenMax.to("#magic_hand", .5, {left: "-20", top: "4", ease: Circ.easeInOut, repeat: 2, yoyo: true}) )
.add( TweenMax.to("#magic_hand", .5, {left: "0", top: "0", ease: Quart.easeOut}) )
.add( TweenMax.from("#magic_hat_rabbit", .65, {top: "166", ease: Quart.easeOut}) );
var scene = new ScrollScene({triggerElement: "#magic", duration: 0, offset: 100})
.setTween(tween)
.addTo(controller);
scene.addIndicators();
});
$(document).ready(function($) {
var tween = TweenMax.from(".magicCntnt", 1,
{scale: 0, ease: Elastic.easeOut}
);
var scene = new ScrollScene({triggerElement: "#magic", duration: 0, offset: 200})
.setTween(tween)
.addTo(controller);
scene.addIndicators();
});
$(document).ready(function($) {
var tween = TweenMax.from("#works_macbook_top", 1,
{ rotationX: -80, ease: Sine.easeOut }
);
var scene = new ScrollScene({triggerElement: ".works .graphic", duration: 250, offset: -100, reverse: true})
.setTween(tween)
.addTo(controller);
scene.addIndicators();
});
var stuffDuration = 1;
$(document).ready(function($) {
var tween = TweenMax.from(".stuff.ruler", stuffDuration, {scale: 0, ease: Elastic.easeOut} );
var scene = new ScrollScene({triggerElement: ".stuff.ruler", duration: 0, offset: 0}).setTween(tween).addTo(controller);
});
$(document).ready(function($) {
var tween = TweenMax.from(".stuff.pencil", stuffDuration, {scale: 0, ease: Elastic.easeOut} );
var scene = new ScrollScene({triggerElement: ".stuff.pencil", duration: 0, offset: 0}).setTween(tween).addTo(controller);
});
$(document).ready(function($) {
var tween = TweenMax.from(".stuff.lightbulb", stuffDuration, {scale: 0, ease: Elastic.easeOut} );
var scene = new ScrollScene({triggerElement: ".stuff.lightbulb", duration: 0, offset: 0}).setTween(tween).addTo(controller);
});
I'm waiting for your tips on how to manage this in a simpler way.
I wasn't sure if I need separate document ready functions, but I was guessing declaring the same variables should only work in separate functions (sorry, lack of JavaScript / jQuery knowledge).
Is there a shorter and more effective way to manage multiple scenes and tweens? Any tips are welcome! Thank you for your help!
Source: (StackOverflow)
I'm using ScrollMagic and Greensock to create a "scroll to" feature, where the user clicks on a link in a persistent navigation, then the view is scrolled to the specified section down the page (a long page full of content and images). But in Safari (v 7.0.1), it scrolls fine about 80% of the time, the rest of the time, it gets stuck part way down scrolling to the selected section. It doesn't even look like it's getting stuck on some significant part of the page, it just gets hung in between seemingly random chunks of the page.
The content on the page is confidential, so I can't share the whole page, but I can share the script that's driving it. Am I doing anything wrong in the script that would cause it to get hung up part way through a scroll?
$(document).ready(function($) {
// build tween
var tween1 = new TimelineMax ()
.add([
TweenMax.fromTo("#trigger1 .image1", 1, {scale: 1, autoAlpha: 1, top: 1200}, {top: -1630, ease: Linear.easeNone}),
TweenMax.fromTo("#trigger1 .image2", 1, {scale: 1, autoAlpha: 1, top: 1300}, {top: -560, ease: Linear.easeNone}),
TweenMax.fromTo("#trigger1 .image3", 1, {scale: 1, autoAlpha: 1, top: 1200}, {top: -1630, ease: Linear.easeNone}),
TweenMax.fromTo("#trigger1 .image6", 1, {scale: 1, autoAlpha: 1, top: 1200}, {top: -1630, ease: Linear.easeNone}),
TweenMax.fromTo("#trigger1 .image4", 1, {scale: 1, autoAlpha: 1, top: 1300}, {top: -560, ease: Linear.easeNone}),
TweenMax.fromTo("#trigger1 .image5", 1, {scale: 1, autoAlpha: 0.3, top: 1200}, {top: -1600, ease: Linear.easeNone})
]);
// build scene
var scene1 = new ScrollScene({triggerElement: "#point1", duration: $(window).height()})
.setTween(tween1)
.addTo(controller);
// show indicators (requires debug extension)
//scene.addIndicators();
//Processing
var tween2 = new TimelineMax ()
.add([
TweenMax.fromTo("#trigger2 .image1", 1, {scale: 1, autoAlpha: 1, top: 900}, {top: -1330, ease: Linear.easeNone}),
TweenMax.fromTo("#trigger2 .image4", 1, {scale: 1, autoAlpha: 1, top: 900}, {top: -440, ease: Linear.easeNone}),
TweenMax.fromTo("#trigger2 .image5", 1, {scale: 1, autoAlpha: 0.3, top: 1200}, {top: -1600, ease: Linear.easeNone})
]);
// build scene
var scene2 = new ScrollScene({triggerElement: "#point2", duration: $(window).height()})
.setTween(tween2)
.addTo(controller);
//Imaging
var tween3 = new TimelineMax ()
.add([
TweenMax.fromTo("#trigger3 .image3", 1, {scale: 1, autoAlpha: 1, top: 900}, {top: -950, ease: Linear.easeNone}),
TweenMax.fromTo("#trigger3 .image4", 1, {scale: 1, autoAlpha: 1, top: 1300}, {top: -960, ease: Linear.easeNone}),
TweenMax.fromTo("#trigger3 .image5", 1, {scale: 1, autoAlpha: 0.3, top: 1200}, {top: -1600, ease: Linear.easeNone})
]);
// build scene
var scene3 = new ScrollScene({triggerElement: "#point3", duration: $(window).height()})
.setTween(tween3)
.addTo(controller);
//Advanced Imaging
var tween4 = new TimelineMax ()
.add([
TweenMax.fromTo("#trigger4 .image1", 1, {scale: 1, autoAlpha: 1, top: 1100}, {top: -1150, ease: Linear.easeNone}),
TweenMax.fromTo("#trigger4 .image2", 1, {scale: 1, autoAlpha: 1, top: 1300}, {top: -890, ease: Linear.easeNone}),
TweenMax.fromTo("#trigger4 .image5", 1, {scale: 1, autoAlpha: 0.3, top: 1200}, {top: -1600, ease: Linear.easeNone})
]);
// build scene
var scene4 = new ScrollScene({triggerElement: "#point4", duration: $(window).height()})
.setTween(tween4)
.addTo(controller);
//Reservoir Services
var tween5 = new TimelineMax ()
.add([
TweenMax.fromTo("#trigger5 .image1", 1, {scale: 1, autoAlpha: 1, top: 900}, {top: -900, ease: Linear.easeNone}),
TweenMax.fromTo("#trigger5 .image2", 1, {scale: 1, autoAlpha: 1, top: 1100}, {top: -340, ease: Linear.easeNone}),
TweenMax.fromTo("#trigger5 .image3", 1, {scale: 1, autoAlpha: 1, top: 1000}, {top: -240, ease: Linear.easeNone}),
TweenMax.fromTo("#trigger5 .image4", 1, {scale: 1, autoAlpha: 1, top: 900}, {top: -140, ease: Linear.easeNone}),
TweenMax.fromTo("#trigger5 .image5", 1, {scale: 1, autoAlpha: 0.3, top: 1200}, {top: -1600, ease: Linear.easeNone})
]);
// build scene
var scene5 = new ScrollScene({triggerElement: "#point5", duration: $(window).height()})
.setTween(tween5)
.addTo(controller);
//Resize fixer
$(window).on("resize", function () {
// update duration.
scene1.duration($(window).innerHeight());
scene2.duration($(window).innerHeight());
scene3.duration($(window).innerHeight());
scene4.duration($(window).innerHeight());
scene5.duration($(window).innerHeight());
});
});
Source: (StackOverflow)
I'm trying to get scrollmagic to trigger a TweenMax animation, but the animation starts without waiting for the scroll trigger to be hit. Am I missing something here?
$(document).ready(function($) {
var controller = new ScrollMagic();
var tween = TweenMax.to('.animateme', 1, {color: "green", scale: 2.5});
var scene = new ScrollScene({triggerElement: '.trigger'})
.setTween(tween)
.addTo(controller);
scene.addIndicators({zindex: 100});
});
Source: (StackOverflow)
Trying to get Meteor template.rendered working for ScrollMagic
this is the code i wish to get it working.
if (Meteor.isClient) {
Meteor.startup(function () {
scrollMagicController = new ScrollMagic();
Template.StartAnimation.onRendered({
// Create Animation for 0.5s
animation: function () {
var tween = TweenMax.to($('#animation'), 0.5,
{
backgroundColor: 'rgb(255, 39, 46)',
scale: 5,
rotation: 360
})
}
});
})}
Pkg Dependency
hipstersmoothie:scrollmagic 0.0.9
This is based on a tutorial made by scotch.io.
and the first part of the code codepen
Trying to recreate the magic in meteor. I'll be grateful if someone could have a look at these codes.
Thank you.
-------------------------------------------------------------------------------
Found another solution by referencing Using greensocks with meteor
if (Meteor.isClient) {
Meteor.startup(function () {
scrollMagicController = new ScrollMagic();
$(document).ready(function () {
// Create Animation for 0.5s
var tween = $(".animation");
TweenMax.to(tween, 0.5,
{
backgroundColor: 'rgb(255, 39, 46)',
scale: 5,
rotation: 360
});
});
Which works !! Still I ponder on how to use it properly with blaze...
In the mean time, i will try to finish the code for the tutorial.
Source: (StackOverflow)
I am trying to rebuild this intro effect using ScrollMagic and GSAP: http://airnauts.com Notice how the intro 'slides' (with text) show and dissappear one after another when scrolling.
Basically, I have set up a stage controller, a scene (the containing div - '.hero-unit') and some tweens for the animation. However, I just can't get the hang of how to animate each slide (three in total) in such a order:
- You enter the website and start scrolling.
- The first slide is animated (using the staggerFromTo method).
- When the slide is fully animated, lower its opacity back to 0 (or move it out of the screen or whatever).
- Show the second slide, as in 2.
- Same as 3.
and so on.
I tried everything that I managed to find as a solution on the internet. I tried using 'TimelineMax', tried hiding the slides when done animating them with onComplete, but nothing seems to work. Here's the code I have so far:
var pinOrigin = {
opacity: 0
};
var pinEnd = {
opacity: 1,
yoyo: true,
ease: Back.easeOut
}
var tl = TweenMax.staggerFromTo('.hero-unit .scene:first-of-type', 1, {opacity:0}, {opacity: 1});
var pin = new ScrollScene({
triggerElement: '.hero-unit',
triggerHook: 'onLeave',
duration: 1000
}).setPin('.hero-unit').setTween(tl).addTo(controller);
To recap: how does one manage to stage different scenes and change between them with a nice transition while scrolling??
Source: (StackOverflow)
I am trying to use this specific animation of ScrollMagic
http://janpaepke.github.io/ScrollMagic/examples/advanced/parallax_sections.html
But it's very difficult to load the files properly. I am trying to include ScrollMagic, GSAP and GreenSock, but somehow ScrollMagic asks me to load GASP previously and GSAP says Main Module is missing and asks me to load ScrollMagic before itself. I am doing it async with jQuery as follow
$.getScript( "http://localhost/icons/gsap.js", function( data, textStatus, jqxhr ) {
$.getScript( "http://localhost/icons/scroll.js", function( data, textStatus, jqxhr ) {
$.getScript( "http://localhost/icons/greensock.js", function( data, textStatus, jqxhr ) {
//whatever
});
});
});
It logs me following errors when gsap is first:
ERROR: The ScrollMagic main module could not be found. Please make
sure it's loaded before this plugin or use an asynchronous loader like
requirejs ERROR: TweenLite or TweenMax could not be found. Please make
sure GSAP is loaded before ScrollMagic or use an asynchronous loader
like requirejs.
and this one when scrollmagic is loaded before gasp
ERROR: TweenLite or TweenMax could not be found. Please make sure GSAP
is loaded before ScrollMagic or use an asynchronous loader like
requirejs.
Did anyone have the same problem before? Do you have a working example to show? How can I fix this loading issues and make an example work?
Source: (StackOverflow)
I'm using the scrollMagic library on a site that I need to display a progress bar. The bar will show the users' location on the page. The width of the progress bar will simply change as the user scrolls up or down. I can't seem to get it to work with the scrollMagic library. This is what I tried among other things. Thanks!
var controller = new ScrollMagic.Controller();
$(function progressBar() {
var tween = TweenMax.fromTo("#progress", 1, {
width: "0%"
}, {
width: "100%"
});
var scene = new ScrollMagic.Scene({
triggerElement: ".header-wrap",
duration: "100%"
})
.setTween(tween)
.addTo(controller);
});
Source: (StackOverflow)