Question

I´m trying to start a web with Superscrollorama plugin, but i´m taking serious problems to start it works.

<script>
$(document).ready(function() {
        var controller = $.superscrollorama();
        controller.addTween('#logo1', TweenMax.from( $('#logo1'), .35, {css:{right:'300px'},immediateRender:true,ease:Quad.easeInOut}), scrollDuration);
        controller.addTween('#logo2', TweenMax.from( $('#logo2'), .35, {css:{right:'300px'},immediateRender:true,ease:Quad.easeInOut}), scrollDuration);            
        controller.addTween('#bg', TweenMax.from( $('#bg'), .25, {css:{opacity:0, rotation: 720}, ease:Quad.easeOut}), scrollDuration);
});

Only works the first item (#logo1) and the next item doesn´t works... (#logo2 & #bg = background)

I want the first logo item (the circle ---> #logo1) appears from the left, letters (#logo2) from opacity and background(#bg) appears from opacity too after logo1 & 2 are appeared before.

What´s the problem? Thanks in advance! (And sorry for my bad english)

Here´s the link: Eduardo Martin

Was it helpful?

Solution

I am having problems understanding you but pretty sure you want to wrap those tweens in a timeLineLite, that way they happen in a sequence, as of right now the automatic conflict manager is going to prevent the 2nd and 3rd set of tweens from happening. http://api.greensock.com/js/ is extremely helpful. My best guess below on what you want to happen. There is also examples of this on the superscrollorama website.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top