visible before animation triggers

[waschbaer__]

well, i have already searched about this issue and found some solutions that worked for others, like givingthe div that is visible before the animation kicks in,  a  visibility: hidden, and then using autoalpha in the animation, but that for some reason dosent work .. i cant figure out why the text is show before the animation kicks in .. giving it a opacity of 0 in the css also dosent work .. 

maybe some one here can figure out how to fix this, 

 

ps: our project consists of multiple slides like this with different animations and fade ins that are triggered , and every single animation that fades or moves behaves that way -.-

See the Pen XwZGrz by waschbaer (@waschbaer) on CodePen

[ZachSaucier]

Hey waschbaer__ and welcome to the forums!

 

I'm not sure exactly what type of effect you're looking to get, but you have an extra section at the top that is throwing off the timings in this demo. Removing it seems to fix the issue in the demo you provided:

 

See the Pen vwdMwe?editors=1000 by ZachSaucier (@ZachSaucier) on CodePen

 

Besides that, I'd be careful nesting general selectors like you're doing (such as $('.textfade_Slide1').each()) inside of other general selectors. If you have anything with the class textfade_Slide1 in multiple sections you could face some weird issues. If you're reusing animations, it might be better to scope the selector by doing something like $(self).find('.textfade_Slide1').each(

[waschbaer__]

sadly i cannot remove the sections cause they all contain different animations , i have just blanked the section before this one out for you guys to better see it , otherwhise you would have to scroll alot to get to the example im gonna try the option of scoping like you said , and see if that helps 

ps: the sections do pin for a duration in wich animations tied to scrolling appear, and then unpin to slide up the next section, that why there is a blank section ontop, i just removed the content otherwhise it would be to much code to debug the error 

 

 

omg i just tested the approach doin $(self).find('.textfade_Slide1').each(  for reusing the animations   and it actually seems to work now ( atleast on my codepen )  thank you very much im gonna still have to try it on our project but i have a feeling that was it  

[waschbaer__]

so sadly it didnt work for our project, i edited the codepen, to pull the animation outside the selector for the slide animation, and added another slide with the same content , the animations dont work at all now, only when the fade is inside the selector for the slide animations but then it shows the same behaviour -.-

[ZachSaucier]

We'll be happy to help if you can reproduce the error! It's impossible for us to help blind though  

 

It might make sense to restart from the ground up so you get a good foundation not only in understanding what is going on but also your code can be written in a clean way.

[waschbaer__]

10 minutes ago, ZachSaucier said:

We'll be happy to help if you can reproduce the error! It's impossible for us to help blind though  

 

It might make sense to restart from the ground up so you get a good foundation not only in understanding what is going on but also your code can be written in a clean way.

you can see the error in the codepen up top , notice how the second slide containting the same stuff is fully visible and only when the animation triggers, it dissapears to fade in ? 

[ZachSaucier]

Just because the effect is the same does not mean that they are caused by the same thing. At this point we will need more information about the way you're doing things in order to help any further. 

[waschbaer__]

1 minute ago, ZachSaucier said:

Just because the effect is the same does not mean that they are caused by the same thing. At this point we will need more information about the way you're doing things in order to help any further. 

i essentially just have one function for a fade in , that gets called multiple times once a scene is in the viewport  via $('classname that we are using').each(function(){   problem is that every time we slide to the next slide, the content that gets faded in  is shown completly visible and then the animation triggers, making it invisible how it should have been from the beginning  and fading it in .   

[mikel]

Hi @waschbaer__,

 

Your construction is very complex. It is therefore not easy to find the cause. I suspect it's related to fromTo and immediateRender ... (?)

 

With a variety of slides, individual animations per slide is my approach

 

• clean dom, proper semantic
• Building scene for scene
• with an individual timeline in which I have everything in view:  timing, positioning, easing ...

See the Pen RmMaZJ by mikeK (@mikeK) on CodePen

 

Grüße aus Hamburg

Mikel

 

 

[waschbaer__]

4 hours ago, mikel said:

Hi @waschbaer__,

 

Your construction is very complex. It is therefore not easy to find the cause. I suspect it's related to fromTo and immediateRender ... (?)

 

With a variety of slides, individual animations per slide is my approach

 

• clean dom, proper semantic
• Building scene for scene
• with an individual timeline in which I have everything in view:  timing, positioning, easing ...

 

 

 

Grüße aus Hamburg

Mikel

 

 

yea i thought about the same, that maybe the from to is the issue and a .to  moving the object from out of view with opacity 0 , and the set start position in css might work better..  completly rebuilding everything takes time that we dont have -.-...but ill try it anyways as it looks atleast doable unless we get other complications along the way 

[Jonathan]

Hello @waschbaer__ and Welcome to the GreenSock Forum!

 

Keep in mind that anytime you use any type of from() tween, that the immediateRender special property is defaulted to true. So you will need to add immediateRender: false if you see that visible before the animation triggers.

• immediateRender:  Boolean - Normally when you create a tween, it begins rendering on the very next frame (update cycle) unless you specify a delay. However, if you prefer to force the tween to render immediately when it is created, setimmediateRender to true. Or to prevent a from() from rendering immediately, set immediateRender to false. By default, from() tweens set immediateRender to true.

That goes for all from tweens

• from()
• fromTo()
• staggerFrom()
• staggerFromTo()

Since your animating opacity (autoAlpha), you can also add visibility: hidden to your elements css so also dont have your item visible on load. The autoAlpha special property will automatically toggle visibility property to visible before animating opacity to 1.

 

Resources:

fromTo():  https://greensock.com/docs/TweenMax/static.fromTo()

CSSPlugin autoAlpha: https://greensock.com/docs/Plugins/CSSPlugin#autoAlpha

 

Happy Tweening

[waschbaer__]

1 minute ago, Jonathan said:

 

Since your animating opacity (autoAlpha), you can also add visibility: hidden to your elements css so also dont have your item visible on load. The autoAlpha special property will automatically toggle visibility property to visible before animating opacity to 1.

 

Resources:

fromTo():  https://greensock.com/docs/TweenMax/static.fromTo()

CSSPlugin autoAlpha: https://greensock.com/docs/Plugins/CSSPlugin#autoAlpha

 

Happy Tweening

visibility hidden, sadly didnt work at all im currently tryin to rebuild the page to fit the style that mikel suggested with his example 

[Jonathan]

Yeah, visibility: hidden should have worked.

 

Do you have a current codepen of this so we can see your code in action and in a live editable environment?

 

@mikel has visibility: hidden in his codepen assigned to the class .hidden and it is working there.

 

[waschbaer__]

8 minutes ago, Jonathan said:

 

well not the whole project, but the old sort of structure with 3 slides 2 animations ( although the completly show the same and to the same atm but thats jsut for showing the issue )   its the codepen at the top

[mikel]

Hi @waschbaer__,

 

Here is a slightly more compressed version that summarizes the structure of ScrollMagic.Scene.

 

See the Pen OYZrQW by mikeK (@mikeK) on CodePen

 

Viel Erfolg ...

Mikel