Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

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

Closed
NaRanJiTo78 opened this Issue · 4 comments

2 participants

@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
Collaborator

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

@janpaepke janpaepke added the question label
@janpaepke janpaepke self-assigned this
@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
Collaborator

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! :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.