[visible before animation triggers]

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

[visible before animation triggers]

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 

[visible before animation triggers]

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 

[visible before animation triggers]

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 .   

[visible before animation triggers]

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 ? 

[visible before animation triggers]

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

[visible before animation triggers]

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  

[visible before animation triggers]

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