Jump to content
Search Community

copy animation not hiding at first

lynette test
Moderator Tag

Go to solution Solved by Carl,

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 have been trying to figure out why all my text is showing for like 1 second and then disappears and the animations start?

 

I am using:

 

tl.set(truck, {rotation: 51, x: 67, y: 110})
    .from(truck, 1, {x:-150, y:250})
    .from(line1, 0.5, {opacity:0})
    .from(line2, 2.15, {opacity:0})
 
I do realise if this may sound like a really simple question. I have even put each copy text in individual divs and given them opacity 0, but still that doesn't work.
 
I have set and image to slide into the banner (truck), then the copy should appear.
 
But that is not the case. We have all the copy showing overlapping each other, then the truck sliding, then copy hides and starts the animation.
 
Any suggestions??
 
Thank you
Link to comment
Share on other sites

Hello lynette

 

This happens since you are using from() tweens. And by default from() tweens render immediately by default please see this video.

 

 

Then set the CSS visibility: hidden; on your elements that is fro line1 and line2 in your CSS stylesheet

 

You will have to use immediateRender:false on your from tweens.

 

Also try using autoAlpha instead of opacity.

tl.set(truck, {rotation: 51, x: 67, y: 110})
.from(truck, 1, {x:-150, y:250})
.from(line1, 0.5, {autoAlpha:0})
.from(line2, 2.15, {autoAlpha:0})
  • 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 you are still having issues please create a codepen demo example so we can see your code in context.

 

 

:)

  • Like 1
Link to comment
Share on other sites

  • Solution

This seems like it just has to do with the fact that the page is rendering before the JavaScript has time to execute.

In a nutshell, just hide the parent of all your elements with visibility:hidden in your CSS and then set the autoAlpha to 1 using a tween like

//CSS
#wrapper {
  visibility:hidden;
}

//js

TweenLite.set("#wrapper", {autoAlpha:1});

This is discussed more here:

 

http://greensock.com/forums/topic/15482-flicker-on-first-load/

 

 

FWIW immediateRender:false is really only necessary when multiple from() tweens are being used on the same properties of the same element. From the code you provided that does not seem to be the case.

 

As jonathan noted, providing a demo really helps us in providing more thorough solutions.

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