Starting timeline with element opacity: 0

[selvinkuik]

I'm hoping I'm missing something super basic, but in the Codepen example here I am trying to start this animation with all the elements having opacity: 0.

 

You can see this is set in the CSS. I then have a delay before the animation starts. However, GSAP is overriding the opacity and setting it to 1, then waiting for the delay then setting the opacity back to 0.

 

How can I get the animation to start with opacity: 0?

See the Pen ExWEZKd by selvinkuik (@selvinkuik) on CodePen

[OSUblake]

Hi selvinkuik!

 

There is no need for those .fromTo()'s in there. You might want to check out about immediateRender.

 

So just use .to(). For an infinite animation, use -1 for repeat, and gsap has a random utility.

 

See the Pen e733f57f81e1be2bcca96e166c81021d by osublake (@osublake) on CodePen

 

 

[selvinkuik]

Thanks @OSUblake!

 

I've updated the CodePen with your suggestions and it works perfectly with GSAP 3.4.2.

 

I've created a new pen here 

See the Pen RwpMpzJ?editors=0010 by selvinkuik (@selvinkuik) on CodePen

 which has the new code but now running GSAP 3.6.1.

 

Under the latest GSAP the animation runs fine for the first loop. But after that the opacity fade out glitches. Do you know if it's possible to do this animation with the latest GSAP or should I use 3.4.2?

 

[GreenSock]

Sorry about any confusion there, @selvinkuik but it looks like that has already been fixed in the next release which you can preview at https://assets.codepen.io/16327/gsap-latest-beta.min.js

 

We're hoping to push that out in the next 2 weeks officially but you're welcome to use that beta file in the meantime. 

[Fabrizio]

I have the same issue, I´ve tried everything before coming here,
- set to autoAlpha:0 before the timeline. Does not work

- the abobe plus fromTo autoAlpha 0 to 1. Does not work

- a simple "to" opacity: 1 but I keep seeing what is supposed to be invisible on load, then it vanishes and then the timeline starts. Why is this happening? This is my first time using gsap so it may be me doing something silly. Please help.

 

here is the áge I'm building https://solar.com.pe/DNL/ 

[GreenSock]

Welcome to GSAP, @Fabrizio! 

 

We can't effectively troubleshoot a live site, so if you'd like more help please make sure you provide a minimal demo like in CodePen, Stackblitz, or CodeSandbox that clearly shows the issue. Just a few colored <div> elements is fine - just the most basic thing to illustrate the problem. 

 

A few things to keep in mind: 

1. It sounds like maybe you're getting the "Flash of unstyled content" that's simply the consequence of browsers loading/parsing/displaying the HTML and THEN executing the JavaScript. It's easy to work around. See this article/video:
2. All .from() and .fromTo() tweens render their starting values immediately by default. So be careful about sequencing multiple .from()/.fromTo() tweens on the same element/properties: 

   let tl = gsap.timeline();
   
   // immediately sets opacity to 0. Notice position parameter is 2, so this tween won't start until 2 second in
   tl.from("#el", {opacity: 0}, 2)
   
   // immediately sets opacity to 1
   tl.from("#el", {opacity: 1});

   So at the very start of this timeline, what would you expect opacity to be? 0 or 1? Well, since the last JavaScript line to execute set it to 1 (immediately), that's what it'll be for the first two seconds. The solution is quite simple: add immediateRender: false to the 2nd tween. This article explains it more: 

    

3. I noticed you're using a lot of .from() and .fromTo() tweens. Those can be super useful. Just beware of logic challenges, particularly with .from() tweens - I've seen people get behavior they didn't expect because they don't understand how they work. Every tween just interpolates between starting and ending values. A from() tween uses the CURRENT values as the destination (end), and you provide the starting values in the tween. So imagine what happens when you put a .from() tween in a mouseenter: 

   button.addEventListener("mouseenter", () => {
     gsap.from("#el", { opacity: 0 }); 
   });

   So let's say opacity is initially 1, and the user rolls their mouse over the element. It'll make opacity jump to 0 and start animating it back to 1. Great. But what if the user rolls off and then over again quickly, when that tween is halfway done and the opacity is 0.5? It creates a new gsap.from(), animating from 0 to the CURRENT value (which is 0.5 at this point!!!), so ultimately when the animation finishes, opacity is at 0.5! Some people think GSAP is somehow broken but it's not a bug or anything like that - it's just a logic issue related to using from() tweens. There are of course very easy solutions to all these things - I'm just pointing out some common things that trip people up. Whenever I see someone having trouble and they're using a lot of .from() tweens, I am immediately suspicious that's the issue. 

If you're still having trouble, we'd be happy to look at a minimal demo and offer some advice. 

 

Good luck! And trust me, once you get past the initial learning curve with GSAP (which really isn't very steep), you'll feel like you have animation superpowers. It'll all start making sense very soon (if it doesn't already). 

[GreenSock]

Also, in case it helps, here's a fork of the original poster's CodePen (from a year ago) with the immediateRender: false added: 

See the Pen qBMaLVw?editors=1010 by GreenSock (@GreenSock) on CodePen

[Fabrizio]

Thank you so much for taking the time to look this over for me.
I'm afraid if I make a CodePen it will work perfectly fine, like your car when you take it to the mechanic. But I'm going to try.

Something I noticed is that when there was only the home page, everything worked fine, after adding the timeline for the second page, the problems started. Another thing I noticed is that the first time the page loads, it works fine, but if you load it again, the content will appear before the timeline starts.

[GreenSock]

21 minutes ago, Fabrizio said:

I'm afraid if I make a CodePen it will work perfectly fine, like your car when you take it to the mechanic. But I'm going to try.

If it does, that means there's something else in your project causing the problems. The best way to troubleshoot is to slowly make it more and more like your "real" project (from super simple to more complex) and test every step of the way. As soon as it breaks, you'll know what exactly caused it. 

 

Are you using any 3rd party libraries or frameworks (like React)? I wonder if you're not doing proper cleanup or something. It's very difficult for us to troubleshoot blind, but once we see a minimal demo that illustrates the problem, I'm sure it'll become clear. 

 

23 minutes ago, Fabrizio said:

Another thing I noticed is that the first time the page loads, it works fine, but if you load it again, the content will appear before the timeline starts.

This sure sounds like the "flash of unstyled content" thing I already addressed.