paraxx

Yay i fixed it! I removed all the fromTo, except the ones in the beginning and replaced them with to, this literally fixed my problem. I have no clue why.. https://jsfiddle.net/Lx4m4ehd/7/

Thank you so much for the reply, and i am aware that this question is a long-shot. Nevertheless i noticed that the github repo for ScrollMagic was somewhat quiet, which gave me the idea of trying here, since i have had some very good experience with friendly people, just like you, replying with a possible resolution for this problem. Its super interesting with the paused parameter, but i am not quite sure where to add. I tried just adding it on the first scene (anchor1) to the to part of the animation, which did not work. If i set the paused to all the tweens it does not move at all. Its probably very important that i explain this is a minimal version based on a very big project, where i am only experiencing the problem with the video background. Everything else is working as it should.

I am building a site with ScrollMagic and GSAP but i have started to experience a problem with my my video background, which is that the last scene is triggered in the beginning, until i scroll down the first scene which then resets the animation. Whats the reason for this behavior? Fiddle: https://jsfiddle.net/Lx4m4ehd/6/

$(window).load( function(){ Fixed my problem. I think it has something to do with my special fonts i am using?

It seems to be working quite well. Except i have a anomaly on the page which is that it seems like the height/width of the divs containing the paragraphs are changing randomly as i update the page, which is resulting in a negative offset. I have wrapped my JS in a ready function.

I tried something like this: var viewport_height = $(window).height(); var viewport_width = $(window).width(); var header_1 = $('#section1 .header_1'); var tween__section_1 = new TimelineMax() .add([ TweenMax.fromTo("#section1 .header_container__1", 1, {y: viewport_height/2 - header_1.height()/2, x:viewport_width/2 - header_1.width()/2}, {y: viewport_height - header_1.height()} ) ]); Only thing i need to add is of course a resize function.. Is there something i am missing out here?

Thanks for your answer! I have been struggling with this task for 2 days now and i understand that top/left are very expensive operations compared to the "modern" transforms. How can i achieve the same with only x/y and x-/yPercent? I like the top/bottom combined with percent as it gives me the "responsive" behavior i am looking for.

I am working on a parallax page, but i have problems moving my elements while scrolling without the choppy behavior. Something tells me that the combination of top/bottom and translate is the root cause, but i am not sure how i solve my task without top/bottom? I am trying to create a behavior where all the elements are almost on top of each other when i have almost reached #section2. How can i avoid this choppy behavior? Its very important that the elements are placed as they are, but i think my usage of top and xPercent is causing performance issues