Hi.
I have been trying to get WWB to animate some elements as I scroll the web page.
In the Animations timeline window, I can add an animation to the object, but play state is either playing or paused. I don’t see a way to trigger the play state via scrolling down the page and triggering at a specific number of pixels above the selected object. Is there a way to do that.
See this website, I’d like to create something similar to this:
Your help would be much appreciated, thanks,
Mark.
Hi @fredphoesh,
Welcome to Pinegrow and the community.
What is WWB and how does it relate to Pinegrow?
Hi,
Sorry, I meant Pinegrow, not WWB (another software I have been trying out)
Thanks!
Mark.
There is a plugin called “Animator Pro for Pinegrow” which gives you a GUI interface. I am not sure if it works with the latest version of Pinegrow 4.x.x, however someone might.
Otherwise you can use any of the available “Animation on Scroll” CSS or Javascript based libraries that you like the features of, many are available to use.
Update: Sorry.
I forgot about this thread, Animator Pro was updated to work in Pinegrow v3 +
I also forgot about this Animate.css one also …
But as stated above you can also use any other “Animation on Scroll” CSS or Javascript based library you prefer.
Are you by chance one of the Adobe Muse users looking for alternatives ? I assume now your first post was referring to WYSIWYG Web Builder (WWB) ? I am not familiar with it but I see it uses skrollr for its scroll animations in the examples.
Hi, thanks for all that help.
Yes, I was using Muse, and WYSIWYG web builder was something I used before Muse.
It does have CSS3 animations, pretty easy to apply using WWB, but I was looking at Pinegrow as an alternative. I am not sure it can do more, and as a person who does not know how to code, EASY is important to me.
Cheers,
Mark.
So Pinegrow obviously is not your first match (and even Web-Design in total).
Cheers
Thomas
MEOW!
and of Course another, 20 obligatory characters
It can do anything you require, as it is not dependent on a specific framework or approach.
For instance as mentioned there are many “Animation On Scroll” approaches and libraries as mentioned above. Almost all of them just require you to attach the reference of the CSS & JS to your page, then set a data-attribute(s) to your item you want to target. Some have additional JS you place in the page for specific parameters. All the various approaches and libraries offer usage examples to get your going.
If that is too much for you then the Animator Pro Plugin, etc., may be the way to go if you prefer.
I assume you are on Windows OS given the WWB, so can’t accurately advise as much, as I am on Mac. Sometimes EASY also comes at a cost, of lacking features, etc., With Pinegrow you are not limited and have the opportunity to learn as well.
You can always open your exported Muse site in Pinegrow (Pro version) as projects, if that would help you?
Hi, thanks @Pinegrow_User for the input.
Yeah, importing muse would help, that’s a great feature. I would definitely need some dumbed-down interface and have emailed the person who wrote the Animator Pro plugin, but have not had a response yet.
Website creating isn’t my job, and I have a lot of other software I try to keep proficient at, photoshop, after effects, premiere, audition, Propellerheads Reason etc… each of which are huge apps… and being 57 I learn something today, and in 6 months when I need to do the same thing, I have to learn it again! Arrogance by people like @Thomas is not helpful, but you have been, thank you.
Mark.
@fredphoesh, yes, sorry about that other commentator.
He is German and does have an eclectic sense of humour that doesn’t always translate well- it was probably meant to be funny… over there.
And, I too am over 50 and and have a life that constantly blows apart and an endless list of techie tasks so know exactly what you mean.
After years of doing this, I am probably still at the advanced beginner/intermediate stage of all this.
but then, a new technology/framework/dancing bear comes out, while I was away doing something and Lo!
I’m back to square 2.5…2…etc
Which I why I couldn’t give a more useful response that too pick up on and highlIght the style of one of the other commentators response to you. He’s usually reasonable so will probably explain it.
And, funnily enough, has been creating a framework of his own, using…animations. so he could have probably given you a bit more useful advice.
His framework, using animations is here
https://clients.updog.co/Reginald-theMagicGrid/index.html
and you can find comments about it in the forum
here
Also, the dev behind the Animator and Animator Pro plugins that @Pinegrow_User listed are one and the same
Animator came out first , is on GitHub and is free and the Pro version is the paid, advanced version -
And both are written by someone who then went on to become one of the 3 Pinegrow Dev team.
N.B. I DON’T know if animator plugin works with Pinegrow 4. I wouldn’t think so, as Animator Pro had to be updated from 1.2 to 2.0 in order to work with PG 3 and 4. so I wouldn’t think you would get anywhere with it tbh.
that is @MhdAljuboori who is great and very helpful -when you can catch him as he is, like the others, always very busy.
You, can for instance, in Pinegrow, Open by URL and then look at
http://animator-pro.mhdaljuboori.me
in Pinegrow. WITHOUT ANIMATOR PRO PLUGIN INSTALLED,
Over on the right, lower section, in the visual editor part, you will see the headlines for some things,like
transform and display highlighted in blue - this means there is something active in them.
you can then look at these, and see what attribute/value pairs are set for these animated things in the style sheets.
Note, quite often, its not the animated object you need to check it, its the ONE ABOVE IT. the container, which contains a certain class. I could be wrong, but thats why I found (im not a pro)
now, WITH ANIMATOR PRO PLUGIN INSTALLED>
…Im trying to find this at the moment 
will update this shortly to show how and where that information appears. when I find it myself!
ok, that wasn’t so straight forward I had to install the plugin to show you, and installed the older one (1.2) by mistake and couldn’t view the animator plugin fields in PG, as it doesn’t work with PG 4
so, thats fixed. I havnet done it since upgrading to 4.6.
right, here you go, this is HOW you would obtain the effects on the Animator pro plugin website… using the
Animator pro Plugin in Pinegrow
So that is how it all looks in order to fire it up with no coding, as you require.
HOWEVER… you STILL need to know the values, parameters you want to tweak etc.
I also don’t know all those, so someone else would be better to help you from here, but hopefully that has laid the groundwork (once you learn how to install the plugin that is)
LOL, yep… I use Google Keep and Drive to take note of new “Gotchas”, things that I MIGHT forget but know already… helps a lot, and make youtube tutorials for myself! Sheesh! Thanks very much for the time you’ve taken, I will definitely explore this and have a look at what’s possible. Pity a trial isn’t available.
Cheers, Mark.
First things first:
Nobody has to apologize for my comments. I can speak for myself as being old enough - 50, being precise. Furthermore I’m not known being the funniest person on board - so no, I’m not joking.
Webdesign is a craft. And as we expect from any craftsman being aware of sharpening their tools and of what they are doing, why should we stop at design. Would you go to a doctor not having the required certification?
Pinegrow can help - but not without the awareness of HTML, CSS and JS - or at least without wanting to know them, period. Preventing them from wrong choices is all I did - using one sentence preferably.
The truth is often not of help - I just wonder why.
Cheers
Thomas
I happened to notice someone in this thread mention WYSIWYG web builder. My advice is to steer as FAR away from that program as possible. I tried using it when I found I needed to start offering my clients responsive websites, and the program I was using at the time (Website Realizer) didn’t yet offer any responsive features (It does now.)
So I bought WYSIWYG web builder, quite excited to explore all the options, as it seems incredibly feature-rich on the surface, and fairly easy to use. The trouble started when I wanted to define my own CSS styles. The program offers a very crippled CSS Style editor that doesn’t seem to retain settings, and limits what classes you’re able to change. Not the end of the world, but then I came across a problem that seemed almost too absurd to be real.
You CANNOT set the font size to anything other than the predefined sizes in the drop-down menu, which the author said he basically copied from Microsoft’s early Office interface. What this means is that you are LOCKED into using fonts that are defined in points, and cannot be expressed in any other means (ex. pixels, ems, %) Even worse is that you are stuck using the point sizes that are in the menu, so it’s a typical Office-style progression like 8, 10, 12, 16, 18, 28, 36, 48, 72. If you want a 15 point font, you’re basically out of luck. If you want a 30 pixel tall font, you’re out of luck. And while the program does allow you to force font sizes on individual divs via the CSS !important rule, it still won’t show correctly in the interface, making it all but impossible to layout pages without constantly having to preview in a browser. The interface ONLY shows fonts in those limited point sizes available in the drop-down menu. It’s an inconceivable flaw it an otherwise “okay” program.
Another big problem I had was how the program handled objects that you wanted to hide on different viewport sizes. It uses EITHER the display property or the visibility property, and you have to choose one or the other at the time you start the site. And there are some serious bugs without how the layout changes when there’s a hidden object on the page that falls outside the height of the actual page as it displays when rendered.
All of these things wouldn’t be deal-breakers IF the creator of the program was open to constructive criticism. Unfortunately he’s not. He’s a very insecure, over-worked, and pretentious individual who adores people who pander to his software (complete with bugs), and basically whines about how hard it is to deal with all the people who complain about issues with the program. He actually told me that he has no intention of ever offering a way to set font sizes in anything other than points because “that’s what his clients are used to.”
Eventually, I gave up trying to explain the benefits to him. He seems to be the only person involved in the creation of the program. There are no other people working at his “company”, so there’s no way to deal with anything he doesn’t agree with.
Hi
I controlled CSS transitions controlled by some javascript. I used a javascript library wow.js with my animations. I downloaded wow from here https://github.com/graingert/wow instructions here https://wowjs.uk
If you are feeling lazy like me or subject to typos (even more like me) take a look http://animista.net for CSS animations which you can copy code in stle sheet.
hope this is useful
Thank you @Paul for the link to Animista.
It’s helped me in figuring out how to animate large images. (Slow pan: like the Ken Burns effect, but without the zoom part.)
I’ve also learned a lot from Kirupa site: https://www.kirupa.com/html5/all_about_css_animations.htm
I’m not trying (as yet) to use with scroll, just to animate. Simple for others I suppose, but all new to me. I’m also not yet sure how to do this in Pinegrow, so for now I’m just manually copy/pasting code.
