problem with position loading trough ajax about mojs HOT 25 CLOSED

@jcorreia hi, thanks for the kind words and this issue! Could you create a code snippet, it will help to understand the issue a lot.

So you want the animation to be in the middle of the right panel? Or in the center of an icon? Did you try to specify where to append the animation with a help of parent option codepen demo? Parent option set the parent specifies the parent of the animation it will be rendered in. But parent should have position of anything different from static so the position of the animation will be relative to the parent.

Hope it helps, I want to help you but not sure I got you right.

from mojs.

Hi,
thanks for the quick answer :)

What I want is to cause a burst whenever someone presses a button.
As I told I´me using 2 panels and the right one is loaded through ajax, with something like this $("#stage").html(data);

It´s on this second panel that my button is, and although its working the animation is very above the button, when it should be around the button. I´m using parent yes and the code is this, taken for the site I mentioned :

 var scaleCurve = mojs.easing.path('M0,100 L25,99.9999983 C26.2328835,75.0708847 19.7847843,0 100,0');
        var el = document.querySelector('.task_approve_individual'),
    elSpan = el.querySelector('i'),
    // mo.js timeline obj
    timeline = new mojs.Timeline(),

    // tweens for the animation:

    // burst animation
    tween1 = new mojs.Burst({
        parent: el,
        duration: 1500,
        shape : 'circle',
        fill : [ '#988ADE', '#DE8AA0', '#8AAEDE', '#8ADEAD', '#DEC58A', '#8AD1DE' ],
        x: '50%',
        y: '50%',
        opacity: 0.6,
        childOptions: { radius: {20:0} },
        radius: {40:120},
        count: 6,
        isSwirl: true,
        isRunLess: true,
        easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
    }),
    // ring animation
    tween2 = new mojs.Transit({
        parent: el,
        duration: 750,
        type: 'circle',
        radius: {0: 50},
        fill: 'transparent',
        stroke: '#988ADE',
        strokeWidth: {15:0},
        opacity: 0.6,
        x: '50%',     
        y: '50%',
        isRunLess: true,
        easing: mojs.easing.bezier(0, 1, 0.5, 1)
    }),
    // icon scale animation
    tween3 = new mojs.Tween({
        duration : 900,
        onUpdate: function(progress) {
            var scaleProgress = scaleCurve(progress);
            elSpan.style.WebkitTransform = elSpan.style.transform = 'scale3d(' + scaleProgress + ',' + scaleProgress + ',1)';
        }
    });

// add tweens to timeline:
timeline.add(tween1, tween2, tween3);

// when clicking the button start the timeline/animation:
el.addEventListener('click', function() {
    timeline.play();
});`

the html button has this:

`
4
john
<td ">email
site

I dont know if this helps and also i´m using bootstrap 2 and jquery 2.

As I said everything seems ok except for the fact that the position of the burst isnt´t correct, and I think it´s because of the right html being loaded through ajax.

If this i´snt enough I´m going to try and build a prototype so you understand better.

Thanks :)

from mojs.

so you pass button element as parent option and want the animation to be relative to that button, right?

from mojs.

yes :)
Although my button in in fact a link, styled with bootstrap to look like a button, but for this problem I think it´s irrelevant.

from mojs.

@jcorreia could you make a simple demo on codepen? I just don't see how ajax and the panels are relevant? 😓 😕

from mojs.

Hi, through codepen it will be difficult, but I will build a full prototype so it can help.
I think it´s an ajava problem, because when it loads there´s not a full reload of the page, and since I have a panel on the left the position is not well calculated...Just a Guess :)
I will test my page without the ajax load na build a prototype.
Thanks for the help so far.

from mojs.

@jcorreia ok, please let me know then. You can just make a simple layout of the page you have.

from mojs.

testmojs.zip

Hi,
I´ve managed to build a minimal prototype so you can check my problem, and uploaded it here

You were right as it doesn´t have anything to do with ajax request. I´m more inclined to being a problem with bootstrap (I´m using version 2).

Hope it helps :)

Thanks and have a great weekend.

from mojs.

@jcorreia I see, first of all, you need to set a position of the button to be different from static - relative, absolute or fixed will do.

Secondly, and most important, you are using the wrong code. I've updated the source code of the demos with most relevant one but seems codrops forgot to update snippets on their tutorial.

So there are 2 ways to proceed for you:

1. Link the old version of 0.174.4 to your page you can find it here https://cdn.jsdelivr.net/mojs/0.174.4/mo.min.js .
2. Or use the new version that you are using now, but use code snippets from this file - it has slightly different syntax https://github.com/codrops/Animocons/blob/master/js/demo.js

I will write to codrops right now, hopefully, they will update their tutorial soon.

Hope it makes sense.

from mojs.

This is the git repo with actual new syntax https://github.com/codrops/Animocons/ .

from mojs.

guys from codrops kindly said they will update the tutorial soon.

from mojs.

Thanks :)
I will try and give feedback.

from mojs.

Ok, I´ve tested and it worked...kind off :)

following the snippet in the code, the burst code with var molinkEl = document.querySelector('.special-link') works. I didnt managed to work with Animocon ..

For what I want I can adapt with the one that´s working but I´m curious why the other doesnt..
I´ve upload and commented the code here:
scripts.zip

You just have to replace this file in the example I previous sent.

Can you check please ?

from mojs.

you need to set position: relative on your button

from mojs.

sorry, forgot to mention I did already do that, althought is a link:

<a class="btn btn-success btn-mini task_approve_individual" href="#" style="position:relative">
                                            <i class="icon-ok icon-large"></i></a>

from mojs.

and it doesn't work for you? let me your source code.

from mojs.

Yes, the code that works is commented and the one that doesnt is not.
The problem is on scripts.js

Here it is:
testmojs2.zip

Anyway with the other sintax is working. It´s just curiosity and it can help someone with the same issues.
Thanks !

from mojs.

so what's wrong right now?

from mojs.

If you check script.js you will understand.
That code is from the demo.js you gave me, and from what I can understand there are two ways to make it work. The first with tweens, isnt working. The second defining each Burst and after adding to the timeline is. Just trying to understand why the first isnt´t...

from mojs.

They both work for me :) What exactly doesn't work for you? In both cases I press the button and the animations is played, relative to the button.

from mojs.

well..to me nothing happens. It´s like the click event isnt catched.
I must be doing bad....Anyhow I will try to build a codepen to help and check this.

I would like to thank you for the excellent support you have given so far, almost in real time :)
As an advice I think mo.js has everything to be great and widely used. It isnt yet (I think) because of lack of some documentation. For it to even better that´s whats missing :)
I know its hard work and you are alone, but the hard part was building mo.js :)

Mainly what´s missing is the basic parts..how to start, hello world, listening to an event, making the animation on a div or button...etc

Thanks for your work :)

from mojs.

You are welcome! And thanks for your feedback! trying to make docs better. Do you use IE to test, there is some error, so maybe that's why you don't see anything (the error is not mojs related)?

from mojs.

I´ve tested with firefox and Chrome, not on IE.

I will build the example on codepen and put the link here.
thanks!

from mojs.

Well..sorry :)
It does work after all. The problem was since I was commenting parts of the code I had an error in javascript code that I didnt noticed.

All is well. thanks :)

I have another issue, but I still have to find out if it´s mo.js related. If it is I will open a new issue.

If you want you may close this. And once again thanks for all the help provided.

from mojs.

ok no probs, please let me know 🎉

from mojs.