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
Related
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'm using this function from Openlayers 3 cookbook:
function zoomTo() {
map.beforeRender(
ol.animation.pan({
source: map.getView().getCenter(),
duration: 150
}),
ol.animation.zoom({
resolution: map.getView().getResolution(),
duration: 500,
easing: ol.easing.easeIn
})
);
map.getView().fit(Houses1860b.getSource().getExtent(), map.getSize());
}
This function works great but, the zoom is closer to the feature than I need and I would like to know if there is another way to do a zoom to the feature, but with one or two zoom levels less than this function does.
I assume it's possible to make another new variable called "extension" and add values to Houses1860b.getSource().getExtent() for doing the extension bigger than by default... I look for posts with this info but I didn't found none, Can you help me?
I will give an example by considering, 100px padding in all directions(top, right, bottom and left). Then I will have that feature in below way.
function zoomTo() {
map.beforeRender(
ol.animation.pan({
source: map.getView().getCenter(),
duration: 150
}),
ol.animation.zoom({
resolution: map.getView().getResolution(),
duration: 500,
easing: ol.easing.easeIn
})
);
map.getView().fit(Houses1860b.getSource().getExtent(), map.getSize(), {
padding : [100, 100, 100, 100]
});
}
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);
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.