Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jackb87

How to hide elements so they aren't visible before animation is triggered

Recommended Posts

Hi, 

Just getting started and this is probably a very easy answer but I haven't been able to turn up anything so far. 

 

I'm trying to create a very simple animation of a site's logo on page load like so:

 

TweenMax.from(".logo-svg", 1, {y:-100, scale:0.85, opacity: 0, delay: 2});

 

However, as the script is being loaded last at the bottom of the page, the logo is flashing up for a second before the animation is triggered. 

 

I know I could stop this by setting the opacity of the logo to 0 in the css, then use TweenMax.to instead, but the .from method is much more intuitive to build the animation with (especially as I want to chain a few more animations on).

 

Is there a simple solution to hide the element before the animation's triggered? I've tried playing round with immediateRender but it doesn't seem to have any effect. 

 

Thanks in advance,
Jack

 

PS sorry for lack of code pen but I wasn't sure it'd be too useful given the query is more to do with the order of assets loading. 

Link to comment
Share on other sites

Hi jackb87  :)

 

try this 

set opacity:0; with css and then :

// if you'r using just Tweens , they will start at same time :
TweenMax.from(".logo-svg", 1, {y:-100,scale:0.85,delay:2});
TweenMax.to(".logo-svg", 1, { opacity:1 delay:2 });

// if you'r using a Timeline :
var Timeline = new TimelineMax();
Timeline.from(".logo-svg", 1, { y:-100,scale:0.85 })
        .to(".logo-svg", 1, { opacity:1 }, 0 ) // this tween'll start at 0 , with first tween at same time 
  • Like 2
Link to comment
Share on other sites

Thanks again Diaco.AW! I'll give that a try. 

 

Just another quick one regarding this animation i'm trying to get going. Here is a codepen to make things easier -

See the Pen pJJNxm%C2%A0 by bilbs87 (@bilbs87) on CodePen

 

You'll notice the second part of the animation I have the lines animating in. I'd like them to expand from the centre instead of from the left. Should I be using a different property than scale to achieve this? I tried playing around with transform origin but didn't have any luck. Thanks!

Link to comment
Share on other sites

PS sorry when I click that codepen link it doesn't work for some reason? here is a link to my profile though http://codepen.io/bilbs87/, it's the only pen I have 

Link to comment
Share on other sites

you need this : transformOrigin: "50% 50%"

 

pls check this out : 

See the Pen xGGReR by MAW (@MAW) on CodePen

  • Like 2
Link to comment
Share on other sites

Yup, Diaco's way will certainly work fine.

 

Another approach is to give the element css of visibility:hidden; and then in your animation tween from autoAlpha:0 like:

TweenLite.from("svg", 3, {autoAlpha:0, delay:2})

I set the delay to 2 so that you can see that the svg does not flash or appear until the tween kicks in.

 

http://codepen.io/GreenSock/pen/mJJRLv?editors=011

 

autoAlpha will automatically set  visibility:inherit and tween from an opacity of 0.

A benefit of setting visibility:hidden over opacity:0 is that the element will not respond to mouse events before it appears.

 

When I'm working on a larger animation with many elements that need to fade in over time, I will typically use css to set visibility:hidden on the DOM element that is the parent of all those elements and then when my JavaScript executes just use a set like:

//css
#container {
  visibility:hidden;
}

//first line of js code
TweenLite.set("#container", {visibility:"visible"});
  • Like 5
  • Haha 1
Link to comment
Share on other sites

Yep that's exactly what I was after - thanks so much guys for the fast and extremely helpful replies. It's easy to get bogged down with these little things when you're starting out and you've certainly saved me some grey hairs - very grateful. Cheers!

Link to comment
Share on other sites

  • 11 months later...
//css
#container {
  visibility:hidden;
}

//first line of js code
TweenLite.set("#container", {visibility:"visible"});

Thank you so much for sharing this solution, just solved my issue :)

  • Like 1
Link to comment
Share on other sites

  • 2 years later...

me too. Great solve. Tried so many other things and I kept getting some larger jpg's loading while the animation had already started. I am using jquery which normally resolves this but I think the extra large jpgs were loading but not fully rendering. Not sure but this approach seems to have fixed it. 

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.
×