Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
paraxx

Parallax elements are choppy when scrolling

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 post
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.

  • Like 1
Link to post
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 post
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 post
Share on other sites

Here's a quick reference for calculating x/y positions that would otherwise be accomplished with left/top/right/bottom.

 

See the Pen oxYELd by sgorneau (@sgorneau) on CodePen

  • Like 1
Link to post
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 post
Share on other sites
$(window).load( function(){

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

Link to post
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.

×