Jump to content
Search Community

How to make animations and image load after the page is loaded

vibhor4all 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

Hi, 

I created a project using GSAP TimelineMax Plugin where the text on the left side  slides in the original position from the left (kind of like fade in).

var timeline = new TimelineMax();
            timeline.from(".main-text-home-cta h2", 1, {x:-100, opacity:0},0)
            .from(".main-text-home-cta h4", 1, {x:-100, opacity:0},0)
            .from(".buttons-under-nested-rows", 1, {x:-100, opacity:0},0)
            .from(".devices-chat-picture", 1, {x:100, opacity:0});

The code above the code i used and added near the </body> tag and the TimelineMax and TweenMax JS files above the code.

The problem i am facing is that when the page loads the text appears on the screen in its original position (the position it will after the animation completes) for few seconds (or till the time the page is loading) without animation and as soon as the page load is completed the animation starts. So I want to know whether this a problem with GSAP Plugin or I am doing something wrong. And also I want to know how to fix this so that while the page load nothinng will be shown in the view and after the page loads the animation will start.

 

One more problem that I faced is that when the animation starts after the page load it is very slow and laggy (again I don't kow whose problem is this).

 

Thanks.

Link to comment
Share on other sites

Hi vibhor4all,

 

Welcome to GreenSock Forums.

 

You could use the window.onload event handler to start your animations everything in the DOM is loaded, ie, scripts, text, images, etc..

 

Regarding opacity: try to use css visibility:hidden and autoAlpha - see #four and #box in the example below.

 

See the Pen LLaGja by mikeK (@mikeK) on CodePen

 

autoAlpha: if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.

 

Hopefully that´s will help ...

 

If you are still having an issue. Then please setup a reduced CodePen showing the issue so we can analyse your case:

https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Happy tweening

Mikel

 

 

 

  • Like 6
Link to comment
Share on other sites

Hello @vibhor4all and welcome to the GreenSock Forum!

 

Like @mikel advised you can check DOM and window. This way you only run your animation when the HTML, SVG, Canvas, and other assets are ready and loaded to be animated.

 

It is best to wait until the DOM is ready then check if the window is loaded. Since both DOM ready and window loaded can fire at different times based on the server wait response and client building the DOM. ;) Also its optional to also only run on the next requestAnimationFrame() to help prevent jank when first loaded.

 

Wait until:

  1. DOM ready: Even if the window is loaded before the DOM, the window will fire immediately.
  2. window loaded: If the DOM is ready before the window is loaded the window will just fire when it is fully loaded.
  3. OPTIONAL  - Run code on next render tick. Waits until next requestAnimationFrame() which prevents running code in the middle of render tick

Vanilla JS way:

 

// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {
  
    // wait until window is loaded - all images, styles-sheets, fonts, links, and other media assets
    // you could also use addEventListener() instead
    window.onload = function() {
      
       // OPTIONAL - waits til next tick render to run code (prevents running in the middle of render tick)
       window.requestAnimationFrame(function() {
      
          // GSAP custom code goes here     
         
       });
      
    };
  
});

 

Or the jQuery  way:

 

// wait until DOM is ready
$(document).ready(function(){
  
  // wait until window is loaded - all images, styles-sheets, fonts, links, and other media assets
  $(window).on("load", function(){
    
      // OPTIONAL - waits til next tick render to run code (prevents running in the middle of render tick)
      window.requestAnimationFrame(function() {
        
         // GSAP custom code goes here
        
      });
    
  });  
  
});

 

But a codepen will be appreciated to help you better

 

 

Resources:

DomContentLoaded() :  https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

requestAnimationFrame() : https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

window onload : https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload

 

Happy Tweening :)

 

  • Like 11
  • Thanks 1
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...