I have a timeline and scene set up with ScrollMagic, and 50% of the time it triggers when the page loads, and not where I have set my trigger to start on a specific div.
My code:
jQuery(document).ready(function($){
// init ScrollMagic Controller.
var controller = new ScrollMagic.Controller();
var fadeAnim;
// Animation 1
fadeAnim = function() {
var timeline = new TimelineMax();
tl1.to('#animateThis1', 1,{ opacity: 1, marginTop: '0%', ease: Power1.easeOut},1)
.to('#animateThis2', 1,{ opacity: 1, marginTop: '3%', ease: Power1.easeOut}, 1.5)
}
new ScrollMagic.Scene({triggerElement: "#trigger", offset: -300})
.setTween(fadeAnim)
.addTo(controller);
Now the frustrating thing is that it works at times and then at other times it starts when the page is finished loading, so that by the time I scroll to #trigger the animation has already completed. Other times it works as expected.
I'm not sure am I missing something, I have searched on Google and my code seems similar to what is needed.
Thanks.
Your code seems to add an offset.Check that.Try using debugging options in Scene or
Try to use addInticator plugin to debug
Try to provide a codepen or plunker for others to check the issue.It is difficult to give a solution based on your current question
I had a similar issue and it was because of a conflict between the version of ScrollMagic and jquery.
For me, using any version of ScrollMagic != 1.3.0 resulted in the error you describe.
It's worth a shot to try using 1.3.0 instead, e.g.
https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/1.3.0/jquery.scrollmagic.js
Related
I'm having a problem where I'm making a function in JavaScript (JQuery):
$('.login').click( function() {
$('#login-container').animate({
left: 0
}, 300, "swing", function(){
$('#login-container').animate({
backgroundColor: 'rgba(0,0,0,0.4)'
}, 2000, "swing");
});
});
Whereas "login" is a button and login-container is a big div which contains a form which people can use to login.
I'm trying to make the giant container that slides over the page only turn its background color to lower the website's exposure but it's working and as far as I know, the code is correct.
The first animation happens but the second one (referring to the backgroundColor) doesn't even start at all.
Thanks in advance
EDIT:
I've simplified my code to see if it was a problem of my syntax or JS simply not applying this animation:
$('.login').click( function() {
$('#login-container').animate({
backgroundColor: 'rgba(0,0,0,0.4)'
}, 2000, "swing");
});
And the element does not have its background-color applied, for some reason.
I don't actually get what you're trying to say here, but if you want to toggle that animation you can use $.toggle() of jquery after the user clicks.
If you want to animate this stuff, look at this documentation provided by jQuery
jQuery Animation
I have been testing a theory design for an animated mouse to indicate that the user of a website can scroll downwards. It's not complicated, and I've come up with a design which should be re-usable...
However for some reason if I try to clone the element and append it, it no longer get animated visually? However if I $.click() with jQuery, it fixes after one iteration.
Perhaps this is just a browser render issue? Please let me know if you cannot replicate the problem! Cheers
jsfiddle: https://jsfiddle.net/xw39e0bs/4/
Turns out that velocity calculates the start point based on current CSS values. So if you clone a moving element mid-motion, that will become the new start point. Therefore, one way to fix this is to provide forcefeeding.
Working example:
function mouse(){
$(".mouse .ball").velocity({
top: ["45%","25%"] //[TARGET_VAL,START_VAL]
},{
duration: 800,
easing: "swing",
}).velocity("reverse",{
delay: 2000,
complete: function(){
mouse();
}
});
}
mouse();
$("#clone").click(function(){
$(".mouse").last().clone().appendTo("#mice");
});
https://jsfiddle.net/xw39e0bs/5/
In this version we're reassigning the selector to bring in the cloned items. All of the clones then animate as expected.
complete: function(){
sel = $(".mouse .ball");
mouse();
}
Holla, I need to reset the animation when I close menu and open it again. How can I do that? Animation works only the first time when I open menu.
CSSPlugin.defaultTransformPerspective = 600;
TweenMax.staggerFrom('ul#menu li', 1.5, {rotationX:-90, transformOrigin:"50% 0%", ease:Elastic.easeOut}, 0.4);
Here is the code: http://codepen.io/hafsadanguir/pen/qOdaab.
Thanks for help!
Is this the kind of result you were after?
JavaScript:
CSSPlugin.defaultTransformPerspective = 600;
var toggleMenu = $('.menu-toggle');
var logo = $('#logo');
var logotitle = $('#logotitle');
var listItems = $('ul#menu li');
var timeline = new TimelineMax({ paused: true, reversed: true });
timeline.fromTo([logo, logotitle], 0.6, { top: 300 }, { top: -50, ease: Power2.easeInOut });
timeline.staggerFromTo(listItems, 1.2, { autoAlpha: 0, rotationX: -90, transformOrigin: '50% 0%' }, { autoAlpha: 1, rotationX: 0, ease: Elastic.easeOut.config(1, 0.3) }, 0.1, 0.3);
toggleMenu.on('click', function() {
$(this).toggleClass('on');
timeline.reversed() ? timeline.play() : timeline.reverse();
});
A few things have changed so here are the details:
First and foremost, I didn't see the need for the hidden class so I have removed it from my solution.
Plus, the on class toggled on the .menu-section element seemed pretty unnecessary as well. I removed it, but kept the properties defined on the .menu-section CSS rule.
On to the fun part, the JavaScript.
You basically needed a TimelineMax to operate upon.
Judging by the imports you had in the JavaScript settings panel, I am assuming that you have some idea of what TimelineMax (and TimelineLite) are all about. By in any case, TimelineLite is about building and managing sequences of TweenLite, TweenMax, TimelineLite, and/or TimelineMax instances and TimelineMax is an extension of TimelineLite, adding more power to it.
So, what happens in the code is that a TimelineMax instance has been initialised, tweens have been added to it and then, upon clicking of the .menu-toggle button element, this timeline is either played or reversed.
The line timeline.reversed() ? timeline.play() : timeline.reverse(); is basically a shortened, fancy version of an if condition and it comes to down to personal preference more than anything else, no performance gain or anything that I am aware of. In a normal if clause, it would have been written like this:
if (timeline.reversed()) { timeline.play(); } else { timeline.reverse(); }.
The condition that is being checked is .reversed() property of timeline. You would notice that while initialising new TimelineMax(...), I set reversed: true property on it. What it does is that after all the tweens are added to timeline, it would behave as if timeline was immediately reversed such that the orientation of the timeline had been flipped. Read more about it in the TimelineMax documentation link I shared above.
The .play() and .reverse() methods are pretty self-explanatory as they make the timeline go forwards or backwards respectively.
That is about it.
Hope this helps.
Hey all Im trying to wrap my head around all this, been playing with it all day. What I'm trying to accomplish is have a background image zoom in (and eventually become transparent through opacity) when the user scrolls down. I've got one half of the desired effect working but It doesn't seem to want to work on user scroll, it just automatically executes.
It must be something simple but Im pretty new to this.
here is the code I've written
var tween = TweenMax.to('#regular', 0.5, {
scale: 2
});
// Init Controller
var controller = new ScrollMagic.Controller();
// Create the Scene and trigger when visible with ScrollMagic
var scene = new ScrollMagic.Scene({
triggerElement: '#featured-image',
reverse: true,
offset: 700
})
.setTween(tween)
.addTo(controller)
http://codepen.io/anon/pen/EjWLyO
Your basic problem is that the setTween method of your scene is not available & this is because you are missing an include of animation.gsap.min.js important plugin in your codepen when it comes to using TweenMax alongside ScrollMagic.
So add this external javascript after your ScrollMagic include in your pen and you are gold.
I have a similar issue, although I am using the above-described javascript solution.
For my specific case I found a solution described here:
https://greensock.com/forums/topic/16014-staggerfrom-always-runs-on-page-load-not-on-scroll-magic-event/
Set in each tween the parameter: immediateRender : false
I am also running a TweenMax call to set the initial parameters after all scene init.
I'm having trouble to integrate the Galleria image gallery plugin onto one of my Jquerytools tabs. When navigating directly to the page with Galleria (example: www.domain.com/index.php#tabnameofgalleriapane), there's no problem.
Whenever the pane with galleria is not loaded immediately (default pane is another pane), Gallery throws an error: Fatal error: Could not extract a stage height from the CSS. Traced height: 0px., which is logical, because when the Galleria pane is not active, it's css is probably display:none;...
Defining the height & width literally does not seem to work. This was the previous setup:
jQuery("#jp_nav").tabs(".jp_pane", { history: true } );
jQuery('#gallery').galleria({
imageCrop: false,
transition: 'slide',
autoplay: 7000,
width: 960,
height: 640
});
So I was thinking to bind the load of the Galleria plugin onload of the pane that contains the Galleria plugin, because in that moment, the Galleria pane does have a height... I've found something to help me on my way, but now I'm getting other JavaScript conflict errors (see below for explanation).
jQuery("#jp_nav").tabs(".jp_pane", {
initialIndex: 0,
onBeforeClick: function(event, i) {
// get the pane to be opened
var pane = this.getPanes().eq(i);
var src = this.getTabs().eq(i).attr("href");
pane.load(src, "#jp_images", function(){
jQuery('#gallery').galleria({
imageCrop: false,
transition: 'slide',
autoplay: 7000,
width: 960,
height: 640
});
});
},
history: true
});
For reasons beyond my control, the website I'm writing this for uses both jQuery and Prototype/Scriptaculous. So please take into account that the script has to be written in noConflict mode. (Which I'm doing in my setup $.noConflict();)
Can someone please tell me if the script below puts me on the right track?
Can someone help me modify the script to work when the #jp_images tab is loaded?
Right now, the above script gives me conflict errors with Prototype.
Anxiously awaiting your expert views!
Regards,
Maarten
I've managed to find a quick and dirty solution (thanks to vfxdude)
Anytime the tab with the Galleria is clicked, I force a page reload, like so:
tabName = 'jp_images';
jQuery('#jp_nav a[href="#'+tabName+'"]').click(function() { if (location.hash == '') location.replace(location.href+'/#'+tabName); });
After this, I can just use the regular old Galleria plugin initialisation.
Granted, it is a little dirty, but it's an easy and quick fix for when on a deadline.