Jump to content
Search Community

Parallax elements are choppy when scrolling

paraxx test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...