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
Related
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'm having an issue with scrollmagic.
I'd like to be able to trigger all 3 animations in sequence on desktop, but on smaller viewports trigger them one by one as the user scrolls.
Having both of these sets of triggers active at the same time presents an unappealing experience where all elements animate twice
I have shown how this issue presents itself in the following codepen :
https://codepen.io/TomBismuth/pen/jYaybe
in short, I only want this to happen on desktop views
var sceneEntire = new ScrollMagic.Scene({
triggerElement: "#triggerall",
reverse: false
})
.setTween(entire) // trigger a TweenMax.to tween
.addIndicators({ name: "1 (duration: 0)" })
.addTo(mainController);
and this to only happen on mobile views
var scene1only = new ScrollMagic.Scene({
triggerElement: "#trigger1",
reverse: false
})
.setTween(row1) // trigger a TweenMax.to tween
.addIndicators({ name: "1 (duration: 0)" })
.addTo(mainController);
var scene2only = new ScrollMagic.Scene({
triggerElement: "#trigger2",
reverse: false
})
.setTween(row2) // trigger a TweenMax.to tween
.addIndicators({ name: "1 (duration: 0)" })
.addTo(mainController);
var scene3only = new ScrollMagic.Scene({
triggerElement: "#trigger3",
reverse: false
})
.setTween(row3) // trigger a TweenMax.to tween
.addIndicators({ name: "1 (duration: 0)" })
.addTo(mainController);
The end goal is to present the following animations (more complex version of the earlier example): https://codepen.io/TomBismuth/pen/ppWqwN in an appealing way for both desktop and mobile users on a website. Having them all trigger at once is unappealing on desktop, and having them trigger in sequence is unappealing on mobile.
Any help would be massively appreciated
For the mobile version you need to set a triggerHook property for when the element is in the viewport. The values are between 0 and 1 where 0 represents the top of the viewport and 1 the very bottom. You can only use increments of .1, so a value of .9 is 90% from the top (or 10% from the bottom) of the viewport depending on how you wish to phrase it.
So using the .9 value on your first scene, it would be:
if (window.innerWidth < 737) {
var scene1only = new ScrollMagic.Scene({
triggerElement: "#trigger1",
triggerHook: .9,
reverse: false
})
.setTween(row1) // trigger a TweenMax.to tween
.addIndicators({ name: "1 (duration: 0)" })
.addTo(mainController);
}
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
})
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.
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??
Improving on your answer I would like to add that you can add the tweens to the timeline successively and they will automatically be added to the end of the timeline.
So a better way for your animation code would be:
var tl = new TimelineMax()
.add(TweenMax.to('.hero-unit .scene:first-of-type', 1, {opacity: 1}))
.add(TweenMax.to('.hero-unit .scene:first-of-type', 1, {opacity: 0}))
.add(TweenMax.to('.hero-unit .scene:nth-of-type(2)', 1, {opacity:1}))
.add(TweenMax.to('.hero-unit .scene:nth-of-type(2)', 1, {opacity:0}))
.add(TweenMax.to('.hero-unit .scene:nth-of-type(3)', 1, {opacity:1}))
.add(TweenMax.to('.hero-unit .scene:nth-of-type(3)', 1, {opacity:0}));
This way the code is a lot more managable in case you want to add anything at any time.
For more information check http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/add/
If all you want to do is add a .to tween to the end of the timeline you can make this even more concise by making use of the TimelineMax.to() method.
From GSAP Docs:
Adds a TweenLite.to() tween to the end of the timeline (or elsewhere using the "position" parameter) - this is a convenience method that accomplishes exactly the same thing as add( TweenLite.to(...) ) but with less code.
So this would make this the best possible GSAP animation code for your purposes:
var tl = new TimelineMax()
.to('.hero-unit .scene:first-of-type', 1, {opacity: 1})
.to('.hero-unit .scene:first-of-type', 1, {opacity: 0})
.to('.hero-unit .scene:nth-of-type(2)', 1, {opacity:1})
.to('.hero-unit .scene:nth-of-type(2)', 1, {opacity:0})
.to('.hero-unit .scene:nth-of-type(3)', 1, {opacity:1})
.to('.hero-unit .scene:nth-of-type(3)', 1, {opacity:0});
Okay, so I figured it out on my own. You have to use TimelineMax (or Lite I guess) and set up the different scenes movement relatively, using delays as such:a
var tl = new TimelineMax().add([
TweenMax.to('.hero-unit .scene:first-of-type', 1, {opacity: 1}),
TweenMax.to('.hero-unit .scene:first-of-type', 1, {opacity: 0, delay: 1}),
TweenMax.to('.hero-unit .scene:nth-of-type(2)', 1, {opacity:1, delay: 2}),
TweenMax.to('.hero-unit .scene:nth-of-type(2)', 1, {opacity:0, delay: 3}),
TweenMax.to('.hero-unit .scene:nth-of-type(3)', 1, {opacity:1, delay: 4}),
TweenMax.to('.hero-unit .scene:nth-of-type(3)', 1, {opacity:0, delay: 5})
]);
var pin = new ScrollScene({
triggerElement: '.hero-unit',
triggerHook: 0,
duration: 2000
}).setPin('.hero-unit').setTween(tl).addTo(controller);