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.
Related
So i've made simple project in cocos2d added a heart sprite in the middle and tried to add an Animation do the heart sprite node (Just as it says on Cocos2d manual).
Problem is that animation works in the Preview, but nothing seems to be moving while playing game.
What should i do?
I tried adding the clip as default, checked PlayOnLoad box, I also created script for the heart Node so that it starts the animation and logs the state of animation for me:
cc.Class(
{extends: cc.Component,
properties: {
},
// LIFE-CYCLE CALLBACKS:
// onLoad () {},
start () {
var anim = this.getComponent(cc.Animation);
cc.log(anim == null);
var animState = anim.play();
animState.wrapMode = cc.WrapMode.Loop;
animState.repeatCount = Infinity;
animState.speed = 1;
cc.log(animState);
},});
it returns JSON that is saying that the animation is playing and all... but its not, what should i do?
I just want the animation to be played :(
EDIT: I found out that the animation is actually running, it's just property "eulerangles" which i was trying to use to animate heart's rotation wasn't really animating. I tried adding some position changes and they happen to work.
OK, so as it always is it was all my mistake for being an imbecil
I was trying to use "EulerAngle" instead of "Angle" property, which was working in editor but nowhere else.
Everything works fine, I'm sorry guys, i'll close this thread here.
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
I am tasked with creating an interactive SVG infographic with few slides for a browser game, it has 5 steps total. When you click prev / next buttons or a specific step, the whole svg should animate itself to the correct step.
In terms of code, this is what I have:
function Slide() {
// Cache all top-level svg elements for later use
this.el = $('svg#betfair-slider');
this.hands = this.el.find('#hands_8_');
this.cardsDesk = this.el.find('g#center-cards');
this.textContainer = $('.step-text');
// Use a shared timeline across all slides, so there are no overlapping tweens
this.tween = new TimelineLite();
}
function Slide2 () {
// Inherit from the main slide
Slide.call(this);
// each slide has its own supporting explanatory text
this.html = [
'<h3>Preflop</h3>',
'<p>Amet sit lorem ipsum dolar</p>'
].join('');
// the main openslide method
this.openSlide = function() {
// find the cards that need to be animated for this specific slide
var cards = this.hands.find('.card');
// fade out each card
this.tween.staggerTo(cards, 0.2, { opacity: 0 }, 0.2);
// Render supporting text
this.textContainer.html(this.html);
};
}
Here are the cards I am trying to get:
I am able to fetch them using the this.hands.find('.card'); jquery method (I can see them in the console), but I just can't animate them. I have tried animating different attributes (opacity, x, y, left, etc), but nothing happens - nothing moves on the screen.
I am able to do this.hands.find('.card').hide() and change the css using jQuery, but why TimelineLite doesn't work here? I also tried this approach:
var cards = this.hands.find('.card');
for (var i = cards.length - 1; i >= 0; i -= 1) {
var card = cards[i];
this.tween.to(card, 0.2, { opacity: 0 });
}
But still no success... The interesting thing is that when I attach an onComplete callback on the tweens, THEY ARE fired, but absolutely nothing moves on the screen. You can check out everything here.
Thanks for the help in advance, any suggestions are more then welcome.
I think you might be misunderstanding how timelines work (or perhaps I'm misunderstanding your intent). Like all tweens, timelines start playing immediately by default. So if you're using one timeline and shoving all your tweens in there based on user interaction (meaning time elapses between when you create it and when you populate it...and populate it more...), its playhead will already have advanced. I bet that's causing your tweens to jump to their end state almost immediately. That's not a bug - it's how things are supposed to work, although there's some logic in GSAP to adjust behavior in certain circumstances to make it more intuitive.
I see several options:
Just use TweenMax instead of a TimelineLite. Like TweenMax.staggerTo(...) and TweenMax.to(...).
Or just create a TimelineLite for each user interaction (instead of one for ALL of your tweens globally). That way you'll populate it right away and it'll play as you expected.
You could use one global timeline if you really want to, but you might just need to manage its playhead if you're going to be inserting tweens on each user interaction rather than all at once.
If you're still having trouble, don't hesitate to post in the GSAP-dedicated forums at http://greensock.com/forums/ and it's be super helpful if you included a codepen or jsfiddle reduced test case so that we can tinker and very quickly see what's going on and how the changes affect the result.
Happy tweening!
I am new in KineticJS and I am stacked. I want to use a simple animation with opacity but I found out that there is not so "simple" as it seems. I read the doc about animations with KineticJS (you won't say simple about this tutorial). What I want to know Is there a simple method to animate things with KineticJS like JQuery or JCanvaScript has? for example
this.animate({
opacity:0,
x: 50
}, 500);
something like this?
If there is not can we use KineticJS with JQuery to make animations simple? I found out THIS project that has very interesting piece of code:
$(logo.getCanvas()).animate({
opacity: 1,
top: "+=50px"
}, 1000);
so guys what do you think? Is it buggy to use this method?
If you just have to do your opacity animation : you should stick to JQuery which will hide the computations done for the animation (and what you were pointed to is a good solution).
If you want more controls over your animation : go with KineticJS.
Through, I think you will have more issues trying to use JQuery animations and KineticJS layers at the same time rather than using only KineticJS (and Kinetic.Animation is pretty simple once you have understand how to play with it)
edit: Quick How-To for animations :
So, as you may have seen, in Kinetic, you do not give the final position like in JQuery : you have an access to a function which is called at each frame of the animation and all the logic have to be placed in it :
<script>
// you should have an object yourShape containing your KineticJS object.
var duration = 1000 ; // we set it to last 1s
var anim = new Kinetic.Animation({
func: function(frame) {
if (frame.time >= duration) {
anim.stop() ;
} else {
yourShape.setOpacity(frame.time / duration) ;
}
},
node: layer
});
anim.start();
</script>
How do I change the zindex of an element inside a canvas?
Example code:
fabric.Image.fromURL('http://nocookie.net/bw.jpg', function(image) {
image.set('left', 200).set('top', 250);
canvas.add(image);
});
var helloWorld = new fabric.Text('Hello world!', {
left: 0,
top: 0,
fontfamily: 'delicious_500',
zindex: 10
});
canvas.add(helloWorld);
Using the fabric.js library.
For future reference:
fabric.Element.html#bringForward
I can't get the dang thing working at all, but here's my guess as to what's happening:
Fabric asks that URL for the image. Fabric has been given a callback method when the image is returned, so while it's waiting, it moves on to the next task
Fabric creates the Text object and adds it to the canvas.
Finally, it notices that the image has loaded (the specific example you provided actually 404'd on me), and passes it to the callback method.
Because the image is added to the canvas after the text, I'm assuming that Fabric is acting just as the canvas normally would: things that are added later are drawn on top of things that are already there. ...Even though you gave the text a z-index.
Remember, I couldn't get it to work and just gave up. So it's entirely possible I'm totally, completely wrong. If that is the case, I have another theory:
Are you sure that zindex is the correct property? If you are, then try setting it on the image, as well:
image.set('left', 200).set('top', 250).set('zindex', 5);
And if you aren't sure, then... there you go.
Since fabric.js version 1.1.4 a new method for zIndex manipulation is available:
canvas.moveTo(object, index);
object.moveTo(index);
i hope this is what you want:
http://jsfiddle.net/Kienz/RRv3g/