Shaun Gorneau

You can create that effect without any Javascript at all. It's just a matter of using a fixed background image attachment on a stack of divs. http://codepen.io/sgorneau/pen/NqJYyR/left Of course you can then use GSAP to handle the "pop-in" elements at particular scroll positions. *** I just reread your question and can see I misunderstood what you were asking ... but now I really don't understand at all Are you asking if GSAP can be used to position the background image in such a way (on scroll) to make it "appear" fixed when in actuality it is translating -y at the same pace the div is moving out of the viewport?

With the way you've currently structured it, the timeline is recreated everytime you click. What you want to do is create the timeline and its tweens once and simply control the playback with the click events. http://codepen.io/sgorneau/pen/MwxwGe?editors=001

Any CSS property that accepts numerical values.

The problem lies in creating a new timeline on every click ... essentially, it is issuing the reverse() method on a timeline that hasn't yet played. Create the timeline outside of your click event and then control it with the click event. http://codepen.io/sgorneau/pen/gpQyzB

If this is just for debugging, you can issue commands via the console to get where you need to be. Examples: tl.pause(); tl.progress(.75); tl.play(); tl.reverse();

The trick here is to set the position parameter using relative (negative) delays http://codepen.io/sgorneau/pen/mJQjaM

Hi malballah, You can use a very similar technique I used to demonstrate a side-scrolling background for someone else's question http://greensock.com/forums/topic/11650-continuous-repeating-scroll/ http://codepen.io/sgorneau/pen/KpwWgy

I might be misunderstanding your question. GSAP animates properties that accept numerical values ... float is not one of those properties.

Your Javascript is firing before the document is ready. Try document.addEventListener("DOMContentLoaded", function(event) { TweenMax.to(".logo", 2, {left:600}); }); or, if using jQuery $( document ).ready(function() { TweenMax.to(".logo", 2, {left:600}); }); I'd recommend jQuery since it's ready() method is more involved than "DOMContentLoaded"

What's the URL for the one on your server?

Sounds like it's probably not loading a required file(s).

One other thing I forgot to mention (and typically forget when focused in so much on a particular issue) is that when doing animations/movement/tweens/etc that result in a message or layout that are fairly essential to the user experience (and any other state would otherwise hinder communication or usability), we should treat these with progressive enhancement. In this case, what if some other JS on the page resulted in an error...prohibiting JS from executing at all? You'd be left with a big, empty area in which the word "Fearless" should be present. I know, I know ... that won't happen But, what if it did? I would take a step back and position (with CSS) the sprite on the page in such a way that the full word "Fearless" is present before anything else happens, then use set() to position it, and then to(). Or don't use a set() and animate from() zero to the intended position. http://codepen.io/sgorneau/pen/pJxvmP (JS commented out to simulate JS not loading...uncomment to see progressive enhancement)

Of course, if you don't want to deal with calculations, you can simplify things by putting the image in a position where the first frame requires being animated to (i.e. the first frame is at -230px). This way you're dealing with 1 to 1 values ... height of the sprite is the value of the distance to move and the number of steps is the amount of "frames" in the sprite. http://codepen.io/sgorneau/pen/LVgELd

Moving the full height of the image will move it out of the viewport. Imagine that this animation was one frame and 230px high. Moving the image -230px would move it out of the viewport. Two frames at 460px high and moving -460px would also move it out of the viewport. But, in the second example, moving it -230px would make it move to show the second frame in the viewport. So, essentially, to make it work, you use the following: steps = Math.round( heightOfSprite / heightOfViewport ) - 1 delta = -( heightOfViewport * steps )

Not sure I understand fully what you want to do ... but it sounds like you want a gallery of timelines that should each only play when in the gallery viewport. Is this right?

You don't need to pause at all ... you're just animating one too many steps and too much on the total height (230px too much). This change should do what you're looking for - http://codepen.io/sgorneau/pen/NqLQMG

If already using jQuery, I would use the Waypoints plugin to detect when your div is in the viewport. If not, you could use something like this http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport/7557433#7557433 As for repeats outside of TweenMax and TimelineMax: http://greensock.com/forums/topic/7514-about-more-features-like-repeat/

Have you utilized hardware acceleration everywhere possible? I would start there. The code is gone from your site now, so I'm not sure of the text at the top was fading in only or moving vertically while fading. I would look at everything using top, left, margin etc for movement and convert those to x/y transitions.

What is the page (on your site) really bad on...iPhone 5?

The codepen I provided is really smooth here ... OS X Safari, Chrome, Firefox and iPhone 6 Safari + Chrome, iPhone 5 Chrome. I can't get the image to load in Safari on iPhone 5 and older though (too large). What are you testing in?

Animate the y, not the margin-top...that should help. http://codepen.io/sgorneau/pen/mJEvrg *Edit: sorry for anything that looked wacky...the globe image was changed (reduced in dimensions) while I was making this. I uploaded the local asset, so it should be good now.

Just an FYI .. as of iOS 8, js fires while scrolling. That one "little" change has made life so much better!

Hi studioraygun ... yes, hardware acceleration is going to be key here. Animating the background position is very choppy in anything other than Safari desktop (from my own experiences as of late). I overcame this by injecting a child element into the element that I wanted to animate the background on, set the overflow of the (now) parent element to hidden, and applied the background to the new child element. That then allowed me to animate the y position (which is hardware accelerated) of the child within the masking parent. This gives the effect that the background is moving when all that is happening is reality is an element's y position is being modified. You can see the effect in the header here (https://www.reynoldsplantation.com). It's very smooth in all browsers on desktop and in iOS Safari (tested iPhone 5, 5s, 6 ... iPad 2, Air) This is not a Greensock issue as these non-hardware accelerated issues would popup using anything. The other issues you might have are due to the fact that the page is extremely heavy (6.16MB). The file globe__globe.png is 4.4MB itself! I ran the image through tinypng.com and was able to shave 77% of the file size off (down to 1MB). That could help load times tremendously. Also, GZIP is not enabled on the server. You could save significant bandwidth (and therefor decrease load times further) by enabling GZIP.

Absolutely. The first step is to create your timeline and whatever tweens necessary on it. The key here is set paused: true. tl = new TimelineLite( { paused: true } ); The second step is to respond to the scroll event; in this example I'm using jQuery to do so $(window).scroll(); Lastly, you would test if the scrollTop value is within your parameters and apply whatever math makes the most sense to progress the timeline progress from 0 to 1 within those parameters. Something like, $(window).scroll( function() { var st = $(this).scrollTop(); if ( st < someArbitraryValue ) { // someArbitraryValue, where to start // Here, "someOtherArbitaryValue" would be the // "height" of the scroll to react to tl.progress( Math.abs( st ) / someOtherArbitaryValue ); } });

I would just capture those original values prior to any tweening. Then do any tweening you like followed, lastly, by tweening back to the original values held in the variables prior to tweening. Something like this, http://codepen.io/sgorneau/pen/pJyRxm