I'm trying to figure out how to use TimelineMax with Scrollmagic.
The problem is easy to explain.
I have similar DOM elements, like particles that have to move slowly than scrolling speed.
This first implementation is WORKING (no Timeline)
var controller = new ScrollMagic.Controller();
var $particles = $("#particles li");
$particles.each(function() {
var tween = TweenMax.to($(this), 1, { y: -100, ease: Linear.easeNone });
var scene = new ScrollMagic.Scene({
triggerElement: ".wrapper",
duration: 1000
});
scene.setTween(tween);
scene.addTo(controller);
});
The second implementation is NOT WORKING (uses Timeline)
var controller = new ScrollMagic.Controller();
var $particles = $("#particles li");
var timeline = new TimelineMax();
$particles.each(function() {
timeline.to($(this), 1, { y: -200, ease: Linear.easeNone });
});
var scene = new ScrollMagic.Scene({
triggerElement: ".wrapper",
duration: 1000
});
scene.setTween(timeline)
scene.addTo(controller);
I'd like to make timeline working but elements are not animating. They move but with null timing.
Thank you for help
--- CODEPENS ---
https://codepen.io/anon/pen/wJOveM (multiple scenes)
https://codepen.io/anon/pen/dvryog?editors=1111 (w/ timeline NOT WORKING)
Can you try to use the TimelineMax .add() method instead of the .to() method in you second implementation? So your code should look like this:
var controller = new ScrollMagic.Controller();
var $particles = $("#particles li");
var timeline = new TimelineMax();
$particles.each(function() {
timeline.add(TweenMax.to($(this), 1, { y: -200, ease: Linear.easeNone }),0);
});
var scene = new ScrollMagic.Scene({
triggerElement: ".wrapper",
duration: 1000
});
scene.setTween(timeline)
scene.addTo(controller);
Also, for better debugging, please add the .addIndicators() method to the scene to see indicators on the screen, which can really help in debugging while scrolling. You can try to play with the duration property as well to see if things work properly.
UPDATE: Since all the particles needed to be moving at the same time, I added a ,0 property at the end of every .add method call. This ensures that all the tweens are triggered at the same positions. You can read more about the position property here:
https://greensock.com/asdocs/com/greensock/TimelineLite.html#add()
Here's hopefully a working example this time :)
https://codepen.io/anon/pen/ryROrv
Hope this helps. Cheers.
Related
my problem is that i use .setTween wrong. It uses just the second .setTween Element. In my case the #identity ID.
// init controller
var controller = new ScrollMagic.Controller();
// animations
var headerpic = TweenMax.to("#headerpic", 1, {opacity: 0.3});
var identity = TweenMax.from("#identity", 1, {opacity: 0});
// build scenes
var scene = new ScrollMagic.Scene({
triggerElement: "#pin1",
duration: "100%",
triggerHook: 'onLeave'
})
.setTween(headerpic)
.setTween(identity)
.setPin("#pin1")
.addIndicators({name: "pin1"})
.addTo(controller);
How do i have to set .setTween that one html-element is fading-out and the other is fading-in during the scrolling?
https://codepen.io/pauernet/pen/qBBaJYO
I have a small problem with scrollMagic plugin.
I'm trying to make simple js and it works fine,
but when I follow to another page here comes an error, I can't understand:
18:27:48:554 (ScrollMagic.Scene) -> ERROR: Element defined in option "triggerElement" was not found: .my-element
I understand that on this page plugin won't find this element, but it shouldn't work so.
My code (I'm also using TweenMax):
var titleParallaxScene = new ScrollMagic.Scene({
triggerElement: '.my-element',
triggerHook: 0,
duration: '100%'
})
.setTween(TweenMax.to('.my-title', 0.5, {autoAlpha: 0, y: '250px', ease:Linear.easeNone}))
.addTo(controller);
I'm a newbie, so if it is silly question, sorry!
Thanks.
is a good practice check if the element is defined in page before initialize animations
so you have to wrap your code in a if statement
if(document.getElementByClassName('my-element').length > 0){
var titleParallaxScene = new ScrollMagic.Scene({
triggerElement: '.my-element',
triggerHook: 0,
duration: '100%'
})
.setTween(TweenMax.to('.my-title', 0.5, {autoAlpha: 0, y: '250px', ease:Linear.easeNone}))
.addTo(controller);
}
this made your ScrollMagic fires only if the target element is defined
I've been learning how to implement more animations on my sites. I was trying to figure out this code because it is similar to the animation I want to implement but I can't seem to wrap my head around it. Ideally, I want the animation to play just once so the elements don't disappear when I scroll back up. But, I can't figure out what's making the animation "reverse" when you scroll back up.
How can I change up the code to do this?
thanks
// init
var controller = new ScrollMagic.Controller();
// loop
$('.reveal_main').each(function() {
var loaderInit = new TimelineMax();
// tween variables
if ($(this).hasClass('left')) {
var imgSet = 20,
imgBlockFrom = -101,
imgBlockTo = 101,
contTextSet = -30,
textBlockStaggerFrom = 101,
textBlockStaggerTo = -101;
} else {
var imgSet = -20,
imgBlockFrom = 101,
imgBlockTo = -101,
contTextSet = 30,
textBlockStaggerFrom = -101,
textBlockStaggerTo = 101;
}
// build a tween
loaderInit
.set($(this).find('.reveal_cont-img'), {autoAlpha:1,xPercent:imgSet},0)
.from($(this).find('.reveal_block-img'), 0.325,{xPercent:imgBlockFrom, ease:Power1.easeOut})
.set($(this).find('.reveal_img'), {autoAlpha:1})
.to($(this).find('.reveal_block-img'), 0.225,{xPercent:imgBlockTo, ease:Sine.easeOut})
.set($(this).find('.reveal_cont-text'), {autoAlpha:1,xPercent:contTextSet},0.3)
// stagger text blocks and text
.staggerFromTo($(this).find('.reveal_block'), 0.7, {xPercent:textBlockStaggerFrom, ease:Power1.easeOut}, {xPercent:textBlockStaggerTo, ease:Power1.easeOut},0.25)
.add('blocksEnd')
.staggerTo($(this).find('.reveal_text'), 0.1, {autoAlpha:1},0.25,'blocksEnd-=0.75')
// build a scene
var scene = new ScrollMagic.Scene({
triggerElement: this,
triggerHook:'onEnter',
offset:700
})
.setTween(loaderInit)
.addTo(controller)
});
Here's the codepen: https://codepen.io/tayanderson/pen/POVEVJ
I figured it out. All I had to do was add reverse: false when building the scene.
var scene = new ScrollMagic.Scene({
triggerElement: this,
triggerHook:'onEnter',
offset:700,
reverse: false
})
Working on an svg preloader, and i'd like a final path of the preloader to have a delay. I'm using progressbar.js
so basically, if i have two paths, it would be
var bar_c2 = new ProgressBar.Path('#c2', {
easing: 'easeInOut',
duration: 1000
});
bar_c2.set(0);
bar_c2.animate(1); // Number from 0.0 to 1.0
var bar_e2 = new ProgressBar.Path('#e2', {
easing: 'easeInOut',
duration: 1000
});
bar_e2.set(0);
bar_e2.animate(1); // Number from 0.0 to 1.0
I would like to have var bar_e2 begin after a delay of 900ms
any help in the right direction would be hugely appreciated!!!
Sorry, i'm new to js and trying to learn, and i did! I realized I could do this with a callback function, so i thought i would post here just so anyone else searching at my level would find the answer.
var bar_c2 = new ProgressBar.Path('#c2', {
});
var bar_e2 = new ProgressBar.Path('#e2', {
});
path.set(0);
path.animate(1, {
duration: 900
}, function() {
line.animate(1);
});
It starts at the end of the first, which isn't exactly what i was going for, but good enough!
I haven't used JS in awhile (2yrs) and I seem to have forgotten some basics;
So my question is: How would I clean-up or 'short-hand' the following javascript?
It would help me out on improving my JS code ( and maybe joggle my brains - LOL ).
var tl = TweenLite.to;
tl("#container", 0, {autoAlpha:0});
tl("#header", 0, {top:"-70px"});
tl("#footer", 0, {bottom:"-180px"});
function showPage() {
tl("#container", .2, {autoAlpha:1, delay:.5});
tl("#header", .2, {top:"0px", delay:.8});
tl("#footer", .2, {bottom:"-150px", delay:.8});
} window.onload = showPage;
...and obviously I am using TweenLite and I am not using jQuery but I am using Zepto. Thnx for your help.
-jason
Something like this:
var tl = TweenLite.to,
duration = 0.2;
// Set starting states in CSS
function showPage() {
tl("#container", duration, {autoAlpha: 1, delay: .5});
tl("#header", duration, {top: "0px", delay: .8});
tl("#footer", duration, {bottom: "-150px", delay: .8});
}
window.onload = showPage;
You could also check out the TweenLite.from method which allows you to do the inverse and set the finished states initially and specify where to tween from.