Search the Community
Showing results for tags 'superscrollorama'.
Found 11 results
-
Is it possible to use a Superscrollorama object to control multiple timelines? My code: http://codepen.io/vincentccw/pen/AwIbx/?editors=111 RIght now the box1 class is animating as intended, but I'm only allowed to animate one box at a time, if I add another timeline below it, the whole animation stop working. Is there a better way to add multiple animation timelines or do I need to create multiple scrollorama object to hold individual timeline>
-
Hi, i'm working on a site using SuperScrollorama. My site has 6 big png-24 + alpha that are animated like this: // slide0 controller.addTween( '#slide0', (new TimelineLite()) .append([ TweenMax.fromTo( $('#sprite1'), 1, {css:{left:50+"%", top:170, scaleX:1.0, scaleY:1.0}}, {css:{left:30+"%", top:150, scaleX:1.2, scaleY:1.2}, ease:Quad.easeInOut}), TweenMax.fromTo( $('#sprite2'), 2, {css:{left:80+"%", top:230, scaleX:1.0, scaleY:1.0}}, {css:{left:50+"%", top:230, scaleX:1.1, scaleY:1.1}, ease:Quad.easeInOut}) ]), 0, // scroll duration of tween 0 ); On my computer, it's fast and fluid (perfect on IE 11 and Firefox, slower on Google Chrome). But on my iPad 2, it's a disaster : very very slow !! I tried with png 8, 256 colors + transparency. It's a little bit better. I tried the Superscrollorama on the iPad, and i noticed that's it's not very smooth. So my questions : - is it a processor problem / graphic card problem? - how to get perfect smoothness on iPad? Does anyone has a website example that i can test? Thanks for any help.
-
The basic of my problem is that I am using superscrollorama to pin timelineLite animations and when I want to jump to another part of the html page going up works fine but going back down is slowed down, (the anchor points are offset by part of the pixel animation that is bigger then the image so links don't go to the correct point on the page), by the animation being done in the timeline. I was hoping for a good way for setting timeline animation to be complete but I have been having problems of goto a specific frame and such. I originally tried to unpin all the pins and put them back in but that doesn't seem to do what I wanted. So now I am trying to complete the animation before I scroll to it so it gets by the pins at the fastest rate. I know you guys don't go deep into superscrollorama but I am just looking for how best to complete a timelite animation to it's final frame from a click event. Any ideas would be helpful.
-
I'm trying to use Superscrollorama to animate some stuff on a webpage. The content only animates inside a specific div on the page, so I want the user to be able to scroll the page normally until that section is reached, then pause the page scrolling while keeping the scrollable animation. Once the animation has completed, they would continue scrolling down the page. I've tried using the pin functionality, but my div that contains the animations stays put while the rest of the page still scrolls. So I set it to pin the whole content of the page, and adjusted the offset so it wouldn't start until the user got to the animated section. This seems to be the right direction, but when I get to that scroll point, it jumps me back to the top of the page for some reason. If I jerk the scroll bar down past that point it seems to sort of work. Here's my code I have thus far: var controller = $.superscrollorama(), animatedContent = $('#content'); controller.pin(animatedContent, 1000, { anim: (new TimelineLite()) .append( TweenMax.to($('#water_color'), .5, {css:{height:0}}) ), offset: 400 }); And the HTML looks like this <body id="whats_new" includeLocalCSS="true" includeLocalJS="true" class="innovation reflex wide"> <section class="hero_area"> <div class="image_background"> <img src="fake.jpg"> </div> <div class="hero_overlay"> <div class="container_12"> <section class="demo top_blue_border grid_12"> <div id="animated_content"> <div id="text_intro" class="animation_copy"> <h2 class="type-light">Engineered to<br>Move with You</h2> <div class="top_blue_border"></div> <p>blah blah</p> </div> <div id="water_color"> <img id="blue_bar" src="sample.png" alt=""> </div> <div id="base_image"> <img src="sample.jpg"> </div> </div> </section> </div> </div> </section> </body> The animated content div is where the animations actually happen and are about 600 pixels down the page.
-
Hi, I am a total noob to jQuery and just learned what GreenSock was today. I would really like to use Superscrollorama for a site I'm building but I don't totally get it. I'm attempting to play with this example but nothing is happening: https://github.com/johnpolacek/superscrollorama/blob/master/simpledemo.html When I save this as an html file and open it up, it's just black words on a white screen. Please help!
-
I am using greesock and superscrollorama and I am having a problem with animating some sections of my site. Uncaught TypeError: Cannot read property 'top' of undefined jquery.superscrollorama.js:99 checkScrollAnimjquery.superscrollorama.js:99 tickHandlerjquery.superscrollorama.js:63 s.dispatchEventTweenMax.min.js:16 f Everything works perfectly on my localhost but I keep getting the same error when on a live site. you can see it here http://efc.demosite.me.uk/ Any help would be much appreciated thanks
-
Hi all, I am currently working on a onepage parallax wordpress site for a client, he spotted a site that had a load of cool effects and wants them adding to his site. That led me to superscrollorama which led me here. I am trying to recreate some of the effects from the superscrollarama demo site on the the clients site. I want to be able to use the same effect on numerous classes and have them trigger when they scroll into view and reverse when scrolling out of view (as they do on the demo site). Unfortunately ALL of them trigger at the same time (when the first class comes into view) and they dont reverse out again. Below is the code from the superscrollarama demo site // individual element tween examples controller.addTween('#fade-it', TweenMax.from( $('#fade-it'), .5, {css:{opacity: 0}})); controller.addTween('#fly-it', TweenMax.from( $('#fly-it'), .25, {css:{right:'1000px'}, ease:Quad.easeInOut})); controller.addTween('#spin-it', TweenMax.from( $('#spin-it'), .25, {css:{opacity:0, rotation: 720}, ease:Quad.easeOut})); I am completely new to this, and am at a loss. Any help/advice would be much appriciated.
-
Hello! First of all, I know that this is not necessarily the right place to be looking for answers regarding SuperScrollorama since it's completely separate. But it does seem as though this is a good place to at least ask the question. I'm trying to design a single-page site, and have run into a problem. The effect I'm aiming for is: A fixed, centered <ul> navigation at the top of the page. On scrolling down, the menu will break apart between the 3rd and 4th <li> and create a space of 250px, into which the logo will scroll (and shrink) and then remain for the duration. I'm achieving the effect by adding a margin-right to the third <li> element, and this is what i want to be animated against the scroll position. However, although the page loads correctly, with the margin-right at 0, as soon as the page starts to scroll the margin-right jumps straight to a number around 180px, before scrolling smoothly for the duration that I need it to. Then, on scrolling up, it animates smoothly but only returns to the random 180px value instead of 0. Here's a JSfiddle: http://jsfiddle.net/aTz4X/5/ It's just that initial jump that's the problem. I've been trying to figure it out for days, but can't get to the bottom of it. Any help or pointers would be much appreciated. Rob -
I'm asking, because I'm trying to make that works inside Edge, but there's no results. I tried to go with several versions of this code from official plugin website: $(document).ready(function() { var controller = $.superscrollorama(); controller.addTween('#fade', TweenMax.from($('#fade'), .5, {css:{opacity:0}})); }); but non of them seem to do anything correctly. In example, if I do something with: var controller = $.superscrollorama(); and change it to: var controller = sym.$("superscrollorama"); then Edge seems to ignore almost whole code and acts like there is only the TweenMax.to function. If there is anyone who knows the answer to solve this problem, please, be so kind. But first of all, I want to say hello to all of You here as a new user of this forum.
-
Im using superscrollorama on one part of my website, that works fine, but I want to implement a different animation further down, but it just wont work! Please have a look, NB it is still early in developement, so try not be too harsh The About us/Testimonials works fine, but it wont work on Services/Portfolio. I replicated the About us code exactly, but it still wont work! Here is the site http://vertex3.vertexwebdesign.co.za/ And here is my code http://pastebin.com/e4Ax5d0F please guys, going mad! Javascript isnt my forte, but trying my best here!
-
I'm using superscrollorama and am having a hard time trying to understand how to use TimeLineMax properly with it. I need to be able to scroll to a specfic point in the timeline, but tweenTo() isn't animating. I have a superscrolloama object which has a pinned TimeLineMax object. Is there anyway I can tween to a label, or get the scroll.y position of an element or label. I'm out of ideas.
