Jump to content
Search Community

delay in animation

Ava 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'm new at JS and would appreciate if someone could take a look why this animation doesn't start in the beginning?

The animation start with a second delay. All images shows a a static image then it disappears and the animation start later.

 

Best,

Ava

window.onload = function(){
    var tl = new TimelineMax({repeat:0});
    
    var Januari = document.getElementById('Januari');
    var Februari = document.getElementById('Februari');
    var Mars = document.getElementById('Mars');
    var April = document.getElementById('April');
    var Maj = document.getElementById('Maj');
    var Juni = document.getElementById('Juni');
    var Juli = document.getElementById('Juli');
    var Augusti = document.getElementById('Augusti');
    var September = document.getElementById('September');
    var End = document.getElementById('End');
    var CTA = document.getElementById('CTA');
    
    
tl.from(Januari, 1, {alpha:0,ease:Power0.easeNone})
    .to(Januari, 1, {alpha:0,ease:Power0.easeNone})

    .from(Februari, 1, {alpha:0,ease:Power0.easeNone})
    .to(Februari, 1, {alpha:0,ease:Power0.easeNone})

    .from(Mars, 1, {alpha:0,ease:Power0.easeNone})
    .to(Mars, 1, {alpha:0,ease:Power0.easeNone})

    .from(April, 1, {alpha:0,ease:Power0.easeNone})
    .to(April, 1, {alpha:0,ease:Power0.easeNone})

    .from(Maj, 1, {alpha:0,ease:Power0.easeNone})
    .to(Maj, 1, {alpha:0,ease:Power0.easeNone})

    .from(Juni, 1, {alpha:0,ease:Power0.easeNone})
    .to(Juni, 1, {alpha:0,ease:Power0.easeNone})

    .from(Juli, 1, {alpha:0,ease:Power0.easeNone})
    .to(Juli, 1, {alpha:0,ease:Power0.easeNone})

    .from(Augusti, 1, {alpha:0,ease:Power0.easeNone})
    .to(Augusti, 1, {alpha:0,ease:Power0.easeNone})

    .from(September, 1, {alpha:0,ease:Power0.easeNone})
    .to(September, 1, {alpha:0,ease:Power0.easeNone})

    .from(End, 1, {alpha:0,ease:Power2.easeOut})

     .to(CTA,.2,{scaleY:1.1,scaleX:1.1})
     .to(CTA,.2,{scaleY:1,scaleX:1})
     .to(CTA,.2,{scaleY:1.1,scaleX:1.1})
     .to(CTA,.2,{scaleY:1,scaleX:1})
      
tl.timeScale(1);
}
Link to comment
Share on other sites

Hello Ava and Welcome to the GreenSock Forum!

 

Since you are using a from() tween have you looked at the Docs. from() tweens by default render immediately.

 

from() docs: http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/from/

 

NOTE: By default, immediateRender is true in from() tweens, meaning that they immediately render their starting state regardless of any delay that is specified. You can override this behavior by passing immediateRender:false in the vars parameter so that it will wait to render until the tween actually begins.

Also this video might help you regarding from tweens and immediateRender property

 

 

And we love code we can test live. You might be better off if you create a limited example in codepen so we can test your code in a live editable environment

 

 

Thanks :)

  • Like 1
Link to comment
Share on other sites

Hi Jonathan,

 

Thank you for the feedback.

 

I use different images to fade in after each other. These are png images. The problem is that when I load this animation the images are visible for a less than a second. It starts to animate later. How do I make the images not to be visible in the beginning?

 

It only works if i use a polite load. It shouldn't be necessary to use polite load since the animation is not so big.

 

 

If I add the immediateRender after (.from(x, 1, {alpha:0,ease:Power0.easeNone, immediateRender:false})). The animation doesn't work.

I'm not using .form and .from in a sequence. I'm not sure how to apply this immediateRender:false to my animation.

 

 

I want to use code pen but since I'm  using bitmap I'm not sure if it works.

 

Best,

Ava

Link to comment
Share on other sites

You might want to use a fromTo() tween instead of using a from() tween then right after using a to() tween.

 

fromTo() : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/fromTo/

 

For example:

tl
.fromTo(Januari, 2, {autoAlpha:1,ease:Power0.easeNone}, {autoAlpha:0,ease:Power0.easeNone})

You could also change alpha to autoAlpha for better performance

 

alpha is like opacity.. but autoAlpha is identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance

 

autoAlpha is part of the GSAP CSSPlugin:

 

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

  • autoAlpha
    Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, 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.
//fade out and set visibility:hidden
TweenLite.to(element, 2, {autoAlpha:0});

//in 2 seconds, fade back in with visibility:visible
TweenLite.to(element, 2, {autoAlpha:1, delay:2});

If your still having an issue please create a limited codepen demo.

 

 

You will find out that more users in the forum will be willing to help if you provide a codepen example.

 

Thanks!

Link to comment
Share on other sites

I looked at that link but i dont you are including the GSAP TweenMax.min.js CDN script

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>

When i try to check if TweenLite or TweenMax is defined .. it throws an error in the console

Link to comment
Share on other sites

Hi, I use these script only.

 

I would love to use TweenMax instead but my banner size is limited to 40kb or maximum 50kb.

If I use TweenMax it would add additional bytes to the weight.

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TimelineMax.min.js"></script>

Link to comment
Share on other sites

If you are loading all those scripts off the cloudfare cdn you are better off just loading TweenMax as it is only ~34kb gzipped, only 1 network request,  and most likely already cached on the user's system. Most banner networks do not count CDN-hosted versions of GSAP against file size.

 

Please read: https://greensock.com/kilobyte-conundrum/ for more info.

 

If you are seeing assets flash on screen before the animation starts this is most likely due to the page rendering before your custom javascript kicks in.

To avoid the flash the best thing to do is to hide your banner with css and then display it when the js runs.

 

To implement this:

 

step 1 add this to your css to hide your assets when the page first renders:

#banner {
visibility:hidden;
}

step 2 In your javascript file add this at the beginning of your onload function:

TweenLite.set("#banner", {autoAlpha:1});
  • Like 1
Link to comment
Share on other sites

Hi again,

 

Everything that has from tween flashes on screen even though I added these 2 in the JS: TweenMax.set("#banner", {autoAlpha:1}); and
TweenMax.set("#text3", {autoAlpha:1});

 

I have also sat visibility:hidden to #banner and #text3.

 

 

HTML

 

body{
    background-color:#ffffff;
}
#banner {
    visibility:hidden;
    position: relative;
    top: 0px;
    left: 0px;
    width: 160px;
    height: 600px;
    background-color:#ffffff;
    overflow: hidden;
    background-image: url("160x600_bg.png");
}
#banner:hover{
    cursor:pointer
}

#text1{
    position: absolute;
    top: -600px;
}
#text2{
    position: absolute;
    top: -600px;
}

#text3{
    visibility:hidden;
    position: absolute;
    top: 0px;

}

</style>
</head>
 

<body>

 

 

JS

 

TweenMax.set("#banner", {autoAlpha:1});
TweenMax.set("#text3", {autoAlpha:1});

window.onload = function () {
    var tl = new TimelineMax({repeat:-1});

    loop = 0;
    loopMax = 3;

    var text1 = document.getElementById('text1');
    var text2 = document.getElementById('text2');
    var text3 = document.getElementById('text3');
    
    function loopCheck() {
  console.log("loopCheck")
     loop++;
     if (loop < loopMax) {
        console.log("play again")
        tl.play();
     } else{
       console.log("done")
       tl.pause();
     }
}
    
tl.to(text1, 1.2, {top:0,opacity:1,ease:Power4.easeOut})
    .to(text1, 1.2, {delay:1,top:600,ease:Power4.easeIn})
    .to(text1, 0, {top:-600,ease:Power4.easeOut})

    .to(text2, 1.2, {top:0,opacity:1,ease:Power4.easeOut})

    .from(text3, 1, {top:0, opacity:0,scale:0,ease:Bounce.easeOut})
    
    .call(loopCheck)
     
    .to(text3, 0.5, {delay:1.2,opacity:0,scale:0,ease:Power4.easeOut})
    .to(text2, 1.2, {top:600,ease:Power4.easeIn})

tl.timeScale(1)

}

Link to comment
Share on other sites

That is not working because your using opacity.. just convert all opacity to autoAlpha

 

If your still having issues please create a codepen.. this will help you get its sorted.

 

But without a codepen example we will be going back and forth with no sure way of seeing your code live

 

 

Thanks!

Link to comment
Share on other sites

Like Jonathan mentioned it is difficult to accurately troubleshoot without a CodePen, but I think the problem is just that you didn't put the code at the beginning of the onload funciton

 

 

What you did here:

 

 
TweenMax.set("#banner", {autoAlpha:1});
TweenMax.set("#text3", {autoAlpha:1});


window.onload = function () {
    var tl = new TimelineMax({repeat:-1});


    loop = 0;
    loopMax = 3;

still has the assets showing up BEFORE the timeline is created and the page is ready (assets all loaded).

 

Please move the set() code inside the onload so that it doesn't make those elements visible until everything is ready


window.onload = function () {
    //wait until page has loaded BEFORE setting autoAlpha:1;
    TweenMax.set("#banner", {autoAlpha:1});
    TweenMax.set("#text3", {autoAlpha:1});

    var tl = new TimelineMax({repeat:-1});

    loop = 0;
    loopMax = 3;

Let us know if that helps.

  • Like 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...