Superscrollarama different screen sizes = different height causing scrollto issues

[epcieye]

We are using the scrollarama plugin and are having an issue where we have a set height set on out intro section but the height increases for bigger screens. We are using the scrollto plugin to navigate to different parts of the page but since the height changes in media queries for different screen sizes the scrollto point changes due to different heights. I tried using anchor's instead of scrolling to set pixel values but since some of the pages live in a timeline, it just takes me to the first page of the timeline instead of navigating me to where the anchor lives inside the timeline. The code I am using is:
$("li#one").click(function()
{
TweenMax.to(window, 1, {scrollTo:{y:$('#showcase').offset().top}});
$('.current').removeClass('current');
$(this).addClass('current');
});
$("li#two").click(function()
{
TweenMax.to(window, 1, {scrollTo:1350, ease:Back.easeOut});
$('.current').removeClass('current');
$(this).addClass('current');
});
$("li#three").click(function()
{
TweenMax.to(window, 1, {scrollTo:3150, ease:Back.easeOut});
$('.current').removeClass('current');
$(this).addClass('current');
});
$("li#four").click(function()
{
TweenMax.to(window, 1, {scrollTo:4400, ease:Back.easeOut});
$('.current').removeClass('current');
$(this).addClass('current');
});

Again, this works fine on my screen, but on a bigger screen, since the height changes the set pixel values are incorrect.
How do I go about building the scrollto plugin inside of a timeline?

[jkrot]

I had extreme issues trying to get this to work as you are describing. See
http://optimine.com/ I had to eventually give up and just set a fixed
height for the starting page and move on. I eventually decided on using
smooth scroll to anchor points and manually pad the pined elements.

You could do a size calculation based on the screen aspect but I found that
extremely inconsistent. You can take a look at the pins I used in

http://optimine.com/js/pp_scripts.js

On Wed, Jan 29, 2014 at 7:04 AM, epcieye notifications@github.com wrote:

We are using the scrollarama plugin and are having an issue where we have
a set height set on out intro section but the height increases for bigger
screens. We are using the scrollto plugin to navigate to different parts of
the page but since the height changes in media queries for different screen
sizes the scrollto point changes due to different heights. I tried using
anchor's instead of scrolling to set pixel values but since some of the
pages live in a timeline, it just takes me to the first page of the
timeline instead of navigating me to where the anchor lives inside the
timeline. The code I am using is:
$("li#one").click(function()
{
TweenMax.to(window, 1, {scrollTo:{y:$('#showcase').offset().top}});
$('.current').removeClass('current');
$(this).addClass('current');
});
$("li#two").click(function()
{
TweenMax.to(window, 1, {scrollTo:1350, ease:Back.easeOut});
$('.current').removeClass('current');
$(this).addClass('current');
});
$("li#three").click(function()
{
TweenMax.to(window, 1, {scrollTo:3150, ease:Back.easeOut});
$('.current').removeClass('current');
$(this).addClass('current');
});
$("li#four").click(function()
{
TweenMax.to(window, 1, {scrollTo:4400, ease:Back.easeOut});
$('.current').removeClass('current');
$(this).addClass('current');
});

Again, this works fine on my screen, but on a bigger screen, since the
height changes the set pixel values are incorrect.
How do I go about building the scrollto plugin inside of a timeline?

Reply to this email directly or view it on GitHubhttps://github.com//issues/140
.

[epcieye]

Hi jkrot, thanks for the info - I will give this a go 👍

[janpaepke]

Hi @epcieye, were you able to sort out this issue?

regards,
Jan

[epcieye]

Hi Jan,
My solution was what jkrot suggested - I just set a fixed height on my starting page and moved on. THe end result was that I had to scroll further on smaller screens to trigger the next slide but it will do for now! :)