Hi @Emmanuel ,
Try to animate a character flying diagonal in view and out view, but I cant get it working. Last time I got a reply about the slideOut animations that needed a update, because they did not work proper, is this fixed?
This is the SVG:
Want to move the clouds and let the guy with the enveloppe fly diagonal in view out view.
Regards & Thanks,
David
Here you see the same animation in Keyshape I made to get a idea:
Hello David,
Unfortunately, concerning interactions, I am far from being a specialist, so I invite Mr @abirana to have a look at this discussion 
OK thanks! 
I will contact him.
Hi @AllMediaLab,
I put together a little something just to make sure I basically know what you are trying to achieve.
Thanks for the mention @Emmanuel
I see that @RobM has already shown a great example here.
Just want to mention that, those pre-defined animations will not fulfill all our needs. Those are only some of the common animations, for anything custom or different than those; we should create our own. Or if there is something similar on the pre-defined animations, then you can edit it and tweak the animations.
I’m not sure if your issue is solved, but if there is anything do let me know.
By the way, here is the example I made on PG Online.
Thanks for the example @abirana !
But there is one question left: Can I show multiple layers with animations at once? I’m only able to select one part of the SVG animate the layer and then go to the next part and do the same.
For example in Keyshape you have all layers on one page together:
Is that possible with Interactions?
Regards,
David
Hi @AllMediaLab,
Do you mean the clouds and the flying man, or…? Right now in @abirana example he has two Interactions animations. The first is on the clouds and the second is on the character. I’m not sure what he did to edit the character - he might have wrapped the paths in an outer g.
Hi Bob @RobM
No that’s not what I mean! When you look at the image of Keyshape you notice all layers on one page that can be edited/selected/animated at the same time. I’m not talking about “tree layers” but “Interaction layers” called “edit animation” > “set” and “tween”. It’s very confusing only being able to see one at the time (or I must be doing something wrong).
You should be able to use the Interaction layers “set” and “tween” for all animations all at the same time with no need to use the tree layers. And also select from there. So if you have say 5 animations you see 5 layers “set” and “tween” at the same time under each other.
I have a issue on the Mac when I copy the same settings as the animation @abirana kindly made and use the same duration(s) 4 it shortens the path the figure travels up and get stuck somewhere in the beginning of its path, when I set duration(s) 1 it travels the whole path, but faster. I noticed this before the higher I set the duration(s) the shorter get’s the path of the animated character very strange!
Regards,
David
Ok so you mean you want multiple animations in one place?
Surely you can put in one place, depending on your need and ease. But you cannot put all in one place if your triggers are different.
On the Interaction/Timeline editor, you can just click on Add Timeline select the element and assign the animations. For multiple animations, it is best to apply on a parent element, makes it better to select child elements and easy to identify.
By the way, about you using animation from my example. Actually I happen to edit/clean the SVG a little, just because of the habit For that you can just increase/decrease the transform values until it goes away. You just have to hit and trail these things, until it works for you.
Hi @AllMediaLab,
Could you please send a screen shot of your Timeline with the two different durations(1 and 4)? It sounds like odd behaviour and I would like to understand better.
Thanks,
Bob
Hi Bob @RobM
Makes not much sense, because the behaviour on my Mac of Interactions is not stable and reliable!
I’m busy with it all day now and History or Cmd Z and Y don’t seem to work. Erasing a animation doesn’t work proper on Mac by clicking the Bin icon. I reported those errors more then a year ago, but nothing seem to have changed. When something go’s wrong (not my mistake) the only possibility is to start from scratch again.
Is there someone working with Interactions on Mac and being able to do so without the hassle I have?
In Keyshape I’m able to make the animation literally in 5 minutes!
The approach is far to complicated to implement the Interactions in a working website. The SVG animation should be separately made to be implemented in the website later. (Like Keyshape editor). This approach is asking for trouble!
I have sent you the project by We Transfer!
Regards,
David
Hi David @AllMediaLab,
Interactions is a fairly complex tool with a learning curve. I can assure you that there are a lot of websites out there using the GreenSocks library, but if you find that Keyshape works with your workflow, that is also great.
With respect to your problem. I noticed that there is a very small additional animation that changes the visibility. Could this be the problem? I deleted it and can make the figure fly the whole diagonal at either a slow or fast speed. Note: between duration changes I reloaded the page to reset the animation.
With regards to the redo - because of the limitations of NW.js, the hotkey for redo on a mac is CMD + SHIFT + Z. I find looking at the History panel is quite helpful.
Cheers,
Bob
@RobM Hi Bob,
Thanks for your reply! Can you please try to set the duration of the character animation on 4, because that is the issue I’m having. As soon as I tune the duration up above 1 the animated character stops moving and get’s stuck in the beginning or half way disappears. I’m not debating the power of Greensock animation I used it for years in the JavaScript version. I’m talking about the difficulties I’m having with Interactions.
On 1 the duration works but is to fast!
Is it possible to use Pinegrow online to upload my project without having a prescription for it?
Regards,
David
Hi David @AllMediaLab,
Actually, the second time the figure flies across the screen it is on a duration of 4. The first time is a duration of 1, second 4, and third is 8. Each time it completes the fly across, but at a slower speed.
Cheers,
Bob
Hi Bob @RobM ,
Just found the issue! When I use any of the pre-set effects from the Sliding Exits, strange things happen to the animation! When I create the animation from scratch it works, but not without artefacts. I’m now working on a version with embedded fonts that I will upload on my own server.
You will notice that there will still be artefacts in the animation, but all effects are a 100% created by my self and I want to know where the issues come from.
Maybe the issues are still connected to this previous error I was talking about before:
In this case I used the Slide Out pre-sets from Interactions before I created them from scratch like I did now.
Regards,
David
https://www.yourweblab.nl/interactions-svg/
As promised my animation, but I still experience artefacts in the animation:
No pre-sets are used! Only self made effects.
The issue:
The animation starts in the middle and then runs normal from bottom to top.
Regards & Thanks,
David
Maybe using Hide at Start would be a good solution.
It seems to me that Mr @abirana uses this in his interaction demo.
Hi @Emmanuel ,
Thanks for you reply!
Can you please point out where this and how this is done? I can’t find it in the Pinegrow online demo.
Regards,
David
