idrumgood

I have a similar issue, but it cannot be solved by the "+=2" method. The issue is that I need my timeline to be exactly 25 seconds long. It is divided into 5 groups of animations, each 5 seconds long. My last section of the timeline contains two animations, but I need them to happen within the first 2 seconds, leaving a space of 3 seconds to fill. So here is where I would want to use a filler to run for 3 seconds. If I use the "+=3" method, it changes the length of the animation, making it only 22 seconds. I suppose I can just add a dummy animation for an element that doesn't exist or something?

Got it. I don't think the touch event was being rebinded. I had some console.log()s in there that would fire whenever a swipe was detected, and it was only firing once. The issue, it turns out, was my use of .staggerTo() with an array of images. I'm guessing (and will be doing some more work to figure out) that there just isn't enough memory to zip through 100 images to create an animation. It works great on desktop, but the poor iPad can't handle it. I'm going to see if removing the image after it is shown speeds it up at all, or just cutting the frame rate down. EDIT** Also, Rodrigo, I don't know if you work for Greensock or just have a great understanding of it, but I wanted to say thank you. Your various forum posts have helped me a ton on this project. It's my first time using Greensock, and knowing that there is a community with members like you in it makes me much more likely to use it again.

tweenTo seems to do what I want it to, but it's having some performance issues. I have a timeline with several labels throughout. On an iPad, I have attached a swipe event to advance to the next label (or previous depending on swipe direction). From the initial state to the first label, tweenTo does great. It animates smoothly and looks good. When I swipe again to the next label, it happens much slower. When I swipe to the third, it happens MUUUUUCH slower, to the point where it's barely even happening. I'm not sure why this is happening. Even if I replace tweenTo() with seek(), it seems to take a while for it to happen. I'm not sure if it's from my swipe code or the timeline code. Below is how I'm detecting swipe. $('#animated_content').bind('touchstart touchend touchmove', function(e){ if(e.type === 'touchstart') { startX = e.pageX; }else if(e.type === 'touchmove'){ endX = e.pageX; }else if(startX != -1 && endX != -1){//make sure the moved at all swipeDir = (startX > endX) ? 'left' : 'right'; timelineMove(swipeDir); startX = endX = -1; //reset for next touches } }); EDIT** I implemented some buttons to link directly to the labels and it's still slow, so I don't think it's the swipe detection. It's iOS 6.1

Ok, I had found tweenTo() and was trying to use it, but for some reason it wasn't working. I'm doing this for an iPad specific site, if that has any bearing on it. I'll play around with it, and if I'm still stuck, I'll see if I can get a codepen of my issue. Thanks for the help!

I'm actually trying to do exactly the opposite of this. I have a timeline, and I want to be able to play it from wherever it is to a specific label. I want seek() to play all the animation in between. Is this possible?

I should probably update that my issue has been solved, and though I really appreciate the help here, I found a solution in another discussion on the Superscrollorama github page (sorry can't find it anymore). The content I was pinning was being set to relative/fixed depending on if pinned or not and it was causing the content that I was animating to shift its positioning (since it was absolutely positioned). An extra container div that I pin was all it took.

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.