[Problem with fixed background with GSAP and ScrollMagic]

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/

[Problem with fixed background with GSAP and ScrollMagic]

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.

[Problem with fixed background with GSAP and ScrollMagic]

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/

[Parallax elements are choppy when scrolling]

$(window).load( function(){

Fixed my problem. I think it has something to do with my special fonts i am using?

[Parallax elements are choppy when scrolling]

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.

[Parallax elements are choppy when scrolling]

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?

[Parallax elements are choppy when scrolling]

I would get rid of all left, top, and bottom properties. I would then take the x/yPercents along with using animated elements' height/width to determine the from and to positions.

 

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.

[Parallax elements are choppy when scrolling]

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

See the Pen xVRXMa by anon (@anon) on CodePen