Elements setted with css directions don´t works, why?

[NaRanJiTo78]

Hi!

In this site http://firenetworks.eu/abc6/index.php the config of the elements are right, but some elements like fade works, but others not, when i set css to/from a direction: right, left or bottom (#esc1, #esc3, #cartel, #cartel7). Why is this?

P.D. Is possible to make faster the spped of the elements in mobile implementation?

Thanks in advance!

[janpaepke]

Hi!

Please try to be more precise. There is now way for me to know what is supposed to be animated and so I see no problem. Please refer to a specific item, write how it should behave and where in your code you are trying to initiate that behaviour.

As to mobile performance I'm afraid there's not much wiggle room. You could try rewriting your site to work with ScrollMagic, which has been written with better regard to mobile support. The documentation and examples are already finished.

regards, J

[NaRanJiTo78]

Thanks for the fast reply, Jan! (The explanation is in the images) For example, in "centros" section, there´s a div with the follow code:

controller.addTween('#cartel', TweenMax.from( $('#cartel'), .25, {css:{bottom:'400px'}, ease:Quad.easeInOut}));

http://prntscr.com/2tvdfx

But it doesn´t move to bottom 400px when scrolling. The same with the contact section bird (#cartel7).

With another elements, the same: http://prntscr.com/2tvevh (from "escuela" section):

controller.addTween('#esc1', TweenMax.from( $('#esc1'), .45, {css:{right:'1000px'}, ease:Quad.easeInOut})); and controller.addTween('#esc3', TweenMax.from( $('#esc3'), .65, {css:{left:'750px'}, ease:Quad.easeInOut}));

Seems that when i set css to bottom, left or right, it doesn´t works, but another effects like fade works with no problem.

Thanks in advance!

[janpaepke]

Hi!

Actually it does work. When I inspect the element and check the bottom css parameter is animated. The reason it doesn't move is that changing this parameter has no effect. As a good rule of thumb: Always try running your tweens before adding them to Superscrollorama and see if they work. If they don't the problem is in your Tween setup or markup, not in Superscrollorama.

In your case the problem is that changing a bottom position only has an effect if the element is positioned relatively or absolutely. I tried "position: relative" on "#cartel" and it works. It flickers though, which has to do with the fact, that you use it both as a tween target and a trigger. So changing it's position results in display errors. When tweening the position of an element never use it as a trigger for that tween.

Hope this helps. regards, Jan

[NaRanJiTo78]

Thanks a lot, Jan! :)