The combination of Superscrollorama and responsive design results in a lack of smooth flow

Looking to implement Superscrollorama animations for arrows on a specific website:

The site is designed to be responsive across various sizes - 960+, 768, 480, and 320. Media queries are utilized to trigger the different layouts. While the arrows animate correctly when loading the site at any browser size, they seem to shift to incorrect positions when expanding or minimizing the window. Any insights on what could be causing this issue?

The elements are set to be absolutely positioned to avoid horizontal scroll bars.

Here's the jQuery Superscrollorama code:

    jQuery(document).ready(function() {
        //ACTIVATE BUTTON FOR SMOOTH SCROLLING
        jQuery("#scroll_button").scrollTo('#section_two_outer');

        //MOVE ARROWS ON SCROLL
        var controller = jQuery.superscrollorama();
        //INDIVIDUAL ELEMENT TWEEN
        controller.addTween('.apply_now_arrow_left', TweenMax.from(jQuery('.apply_now_arrow_left'), .5, {css:{left:'-2500px'}}));
        controller.addTween('.apply_now_button', TweenMax.from(jQuery('.apply_now_button'), .5, {css:{opacity: 0}}));
        controller.addTween('.apply_now_arrow_right', TweenMax.from(jQuery('.apply_now_arrow_right'), .5, {css:{left:'5000px'}}));
jquerycssresponsive-design

Answer №1

Hello Dave,

After reviewing your site, it seems that the issue with Superscrollerama is not a major one. The problem lies in the inline CSS changes made to your page elements during the animation process. When the animation occurs, it manipulates the 'left' attribute of the CSS over time, but upon completion, it leaves the left attribute on the element causing layout issues when resizing the window.

One way to resolve this is by implementing a jQuery callback function after the animation finishes to remove the inline CSS from the arrows. This will allow your stylesheet to control their position effectively when the window is resized. In the worst-case scenario, there might be a slight flicker if the animation coincides with changing viewport sizes, although achieving this is quite rare and unlikely.

// Sample code snippet sourced from http://johnpolacek.github.com/superscrollorama/
controller.addTween('#fade', 
  TweenMax.from($('#fade'),.5,{
    css:{opacity:0}, 
    onComplete: function(){alert('test')}
  }));

Consider implementing something like the following example:

jQuery(document).ready(function() {
    //ACTIVATE BUTTON FOR SMOOTH SCROLLING
    jQuery("#scroll_button").scrollTo('#section_two_outer');

    //MOVE ARROWS ON SCROLL
    var controller = jQuery.superscrollorama();
    //INDIVIDUAL ELEMENT TWEEN
    controller.addTween('.apply_now_arrow_left', TweenMax.from(jQuery('.apply_now_arrow_left'), .5, {css:{left:'-2500px'}, onComplete:function(){jQuery('.apply_now_arrow_left').css("left","auto")}}));
    controller.addTween('.apply_now_button', TweenMax.from(jQuery('.apply_now_button'), .5, {css:{opacity: 0}}));
    controller.addTween('.apply_now_arrow_right', TweenMax.from(jQuery('.apply_now_arrow_right'), .5, {css:{left:'5000px'}, onComplete:function(){jQuery('.apply_now_arrow_right').css("left","auto")}}));

Keep in mind that the specific implementation may vary depending on your stylesheet structure. Feel free to adjust accordingly based on your requirements, but the basic concept remains the same.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with unrecognized expression in JQuery when processing Ajax response

Recently, I implemented a JQuery Ajax Form on my website. $('#modal-body-sign-in').on('submit', '#sign-in', function(e) { e.preventDefault(); var data = $(this).serialize(); var url = $(this).attr(&apo ...

javascriptjqueryajax

How can we centralize an image above text within a UL element?

Is there a way to achieve the effect shown in my mockup using just one unordered list (ul) instead of having separate ul elements for images and text? Essentially, I want to display an image with associated text below it within a single ul element using CS ...

csshtml-lists

Tips for repositioning my sidebar using CSS and HTML

I'm a beginner in CSS and HTML and I'm struggling to make my sidebar move to the side on my website. I have divided my site into three div areas: one for the 'sidebar', one for the 'main content', and one for both called &apos ...

htmlcsssidebar

Manipulate SVG elements by dragging them along the boundary of the path

Looking to achieve a specific functionality where I can drag and drop an element along the edges of a drawn path, rather than inside the path itself. To clarify, the goal is to move the red marked element on the black line bordering the path, allowing move ...

javascriptjquerysvg

Having trouble aligning and resizing text and divs accurately

Hello, I'm having trouble centering my text within a div and fitting three divs inside my content area. Here is the code snippet: HTML <div id="content"> <div class="latest"> <p>Gentlemen, these are my latest works< ...

csshtmltextcenter

What is the proper HTML tag and syntax used for adding a text box within the content of a webpage?

Question about HTML: How can I add a text box or block to an HTML page that is filled with plain text? I want the text box to align to the right and be surrounded by the plain text, essentially wrapping around it. I also need to specify the dimensions of ...

htmlcss

Ways to target all select elements within a form, excluding those with a specific class applied to them

It's quite clear from the title that I am trying to target all select elements within a form, excluding those with the ".notSelectable" class. ...

jqueryselect

Discover the method for measuring the size of a dynamically generated list

I'm currently working on a chat box that displays messages as a list. One issue I'm facing is that when I click on the start chat button, the chat box opens but the length of the list always remains zero. How can I resolve this problem? $(docu ...

javascriptphpjqueryhtml

Displayed hours may not be complete on the Dhtmlx timeline

I'm experiencing an issue with the cell timeline feature in DHTMLX. I want to ensure that the cell size is consistent and displays the full hour, or horizontally scrolls if the hours extend beyond the device screen. Despite my efforts to consult the ...

jquerydhtml

Show flexibility in the grandchildren of a row layout

My goal is to achieve a layout similar to the image below using the flex "system", but I am facing a challenge with some generated directives that are inserted between my layout div and the flex containers: https://i.sstatic.net/nq4Ve.png <div id="i-c ...

angularjscssflexboxangular-material

Trigger a fixed bottom bar animation upon hover

I have a bar fixed to the bottom of the browser that I want to hide by default. When a user hovers over it, I want the bar to be displayed until they move their cursor away. <!doctype html> <html> <head> <meta charset="utf-8"> &l ...

javascriptjqueryhtmlcss

I am facing an issue where the text I included is not appearing on the website that

While developing a React version of my online portfolio, I encountered an issue. Once deployed on GitHub pages, the text on my landing and contact pages disappeared. Despite removing the background image thinking it might be hiding the text, the issue pers ...

javascriptcssreactjsmaterial-uigithub-pages

Tips for resizing the MUI-card on a smaller screen

Is there a way to adjust the width of the card on small screen sizes? It appears too small. You can view my recreation on codesandbox here: https://codesandbox.io/s/nameless-darkness-d8tsq9?file=/demo.js The width seems inadequate for this particular scr ...

javascriptcssreactjsmaterial-ui

Adjust the class attribute in real-time

My image doesn't appear in the correct position when I dynamically set it using the margin-top. Below is an image with a red arrow pointing to the right, which is what I want: https://i.stack.imgur.com/ue4mY.png The CSS I have is as follows: .file ...

htmlcssangularjs

Confirm that one input falls within a specified range of two inputs

I am trying to implement javascript validation for a form with two inputs. Specifically, I want to achieve the following: If a text input is entered and the dropdown remains unselected, the validation should trigger for the text input and the form should ...

javascriptjqueryvalidationinput

Struggling to display the preloader animation while waiting for the render.com server to start up (using the free tier web service)

My choice for deploying dynamic websites is render.com and I am currently using their free tier. The issue with this free service is that Render spins down the web service after 15 minutes of inactivity, resulting in a delay when it needs to spin back up u ...

javascriptjquerypreloaderrender.com

Combining an input box and label on a single line with the help of Bootstrap

Hi, I'm Sonal and I'm currently utilizing a Modal on my website. Within this Modal, I am looking to create a form with labels and input boxes displayed on the same line. Below is the code snippet I am working with: <a data-toggle="modal" hre ...

htmlcsstwitter-bootstrap

Utilizing ASP.NET with JavaScript to target elements by ID within an iframe

Struggling to populate my form within an iframe by inputting a value in a textbox and selecting an option from a dropdown menu. webform1 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title ...

javascriptjqueryhtmlasp.netiframe

Is it possible to use display:grid with a parent element set to a height of 100%

Why doesn't the display:grid property stretch my content to the height of this column? The HTML structure row - col-6 is created using Bootstrap. I am aware that I can manually set a specific height for the parent container, but I would prefer not to ...

htmlcssheightcss-griddisplay

Looking to discover how to optimize a website for various Android resolutions?

Currently, I am working on designing websites specifically for Android phones. However, I have encountered a major challenge due to the wide range of screen resolutions found on these devices. Some phones boast a height of 800px while others are limited to ...

androidhtmlcssandroid-layoutmobile