Beginner GSAP user, trying to play around with some Tweens on a site

[MikeTheVike]

I'm messing around with adding some simple fade/slide movements to a website. It's working except the elements are visible while the page loads, then when the GSAP JS activates, the objects disappear and animate in to the original positions. How do I get around this? Do I need to position the elements and set the opacity to 0 using css initially? I tried this, but that means tweenFrom doesn't work correctly. I setup a codepen with just the site navigation. It's a little hard to tell it's not working because the page loads much quicker, but there is a brief flash of the elements before they animate. Any help would be awesome, thanks!

 

 

 

See the Pen kXKgRA by MikeTheVike (@MikeTheVike) on CodePen

[ohem]

The flash is occurring in the brief instant before TweenMax has loaded.

 

If you want to use "from" tweens, the best thing to do is to first make your content invisible using CSS; you can apply the visibility setting to the whole parent container.  Then use TweenMax to set the visibility of the content to visible, so that the content doesn't show before TweenMax has loaded: 

See the Pen AXGqEG by ohem (@ohem) on CodePen

 

You can do it even without the window.onload part.

[MikeTheVike]

ohem, thanks for the info and sample code. I can see how hiding the wrapping container would work in this situation. I wonder if GSAP isn't the best thing for this type of functionality? Seems like hiding the wrapping container might not always work out. I've previously used wow.js for things like this. Thansk for your help, can't wait to dig in more.

[Jonathan]

What ohem is describing is just best practice when animating elements, especially from() tweens.

 

So just a rule of thumb..

 

When animating with a from() tween using opacity it is best to set the initial property values your going to animate. Your animating opacity, so for performance and a smoother animation you should always set your initial CSS.

 

ohem showed you one great way by using the set() method, Thanks ohem!

 

Another way is since your animating opacity.. you can do a couple of other things:

 

First is for better performance you can use autoAlpha instead of opacity:

 

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});

You would add the CSS property visibility:hidden; to your style-sheet CSS for #main_logo and .navigation li so they are hidden when the page loads. Then when you animate autoAlpha it will adjust the opacity and visibility CSS properties accordingly and you will get better performance.

 

See the Pen KrjRwx by jonathan (@jonathan) on CodePen

#main_logo {
  visibility:hidden;
}

.navigation li {
  visibility:hidden;
}

The above ensure the elements your animating with a from() tween are not visible on load since from() tweens by default run immediately,

TweenMax.from("#main_logo", 1, { x:30, autoAlpha: 0 });
TweenMax.staggerFrom(".navigation li", .5, { x:30, autoAlpha:0}, .1);

If you are using from() tweens you can also add immediateRender: false on your from() tweens to prevent your from() tweens from running immediately. Here are some other helpful info on using from Tweens:

 

 

if you were using a to() tween then GSAP gets the starting value of the property you are animating from the CSS stylesheet. Or you can use the set() method to set the initial state of the CSS property you are animating. Again this is best practice since your defining your CSS values making sure you dont have the wrong value being set or inherited some where else in your CSS. This will give you greater control of your animation and help with cross browser goodness.

 

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

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

 

[PointC]

Just to add my 2 cents worth to Sir Jonathan's excellent detailed explanation  - quick flashes of content are not unique to GSAP. It's something that has always been around and has the acronym of FOUC - Flash Of Unstyled Content. If you Google that, you'll find plenty has been written about it over the years. 

 

Happy tweening.

[MikeTheVike]

Thanks Jonathan, it makes sense and I will look into modifying what I have going. Thanks for the detailed answer!