JS & Code in Wordpress

  • Started
  • Last post
  • 12 Responses
  • mg33

    Disclaimer: This isn't a "where do I start to customize Wordpress" post. I've been doing that stuff for years and know the basics-to-competent things I can do with WP, especially customizing themes, custom fields, etc. But since I use WP for all my sites, I'm curious about how I can start exploring more advanced interactivity and motion in WP.

    So what's the best way to approach this? As an example, take this site. www.basicagency.com > specifically some of the subtle motion effects, but more importantly, the page transition when you click "About." Another example is the transitions and effects in a site like this - https://brunoarizio.com

    How can things like this be explored in WP, especially within a robust theme such as Kalium (been using it for a while). Is that possible to integrate stuff like this or are we talking making a whole new theme or custom build?

    Ultimately, I'm interested in just learning some more advanced skills from my own sites, but also using those skills to better design and scope more immersive web work for our agency.

    Where to start? Learning how to integrate a JS library and how to work with it? Using a plugin that offers a bunch of nice effects and tools?

    It's worth adding that in some reading and research I keep finding this title called "design technologist" which is someone that can span visual UI design, user experience, and front end development. I'm lightest on the latter, but it goes with the question above - what are the easiest things to learn and experiment with to help pull off complex web stuff? What can help me bring ideas to life in code in ways that prototyping tools can't?

  • uan0

    look at css transitions first. a css change triggers them.

    historically it‘s js that went into css specs and by now is supported by all browsers.

    • by css change, I mean, the class name triggers a transition with timing and everything defined in css code.uan
    • Thanks. I've gotten into that a little bit in the past year.mg33
    • Don't you need JS to add/remove a transition class?dbloc
  • sted0

    these things if they are wp are headless and a js framework sits on their top what does all the front end things.

    yes you need a theme what supports these things

  • monNom1

    I think you can get a very long way with modern CSS. Here's a slidey/animatey interactive demo I made exclusively with CSS (no JS). http://www.hi.agency/deck/
    You can pick through the (ugly) source-code for some ideas.

    One of my favourite approaches combines modern CSS variables with just a little javascript to manage state. You use JS to update CSS variables in the stylesheet, and those changes will cascade through the document styles, which will animate if you have transitions set.

    Combine that with css transitions, css keyframes, and possibly even 3D transforms and you get a very rich animation pallet that is very light-weight, runs on the GPU, lends itself well to progressive enhancement for older browsers or mobile. You can do some simple checking to cater the experience almost exclusively in css.

    • Nice work!dbloc
    • That's really cool! Thanks for sharing. Question for you below.mg33
    • Thank you! This demo actually won me a trip to Barcelona via Smashing Mag a few years back.monNom
    • Badass, that's awesome.mg33
  • dbloc0

    This one works great.
    https://scrollrevealjs.org/

  • dpi0

    Not a expert however I will try to add some ideas.

    Web animations generally. Really complicated story. Starting from basic gif animations and I don't know where it ends. Maybe some crazy WebGL stuff?

    I personally like to use Tweenmax GSAP for web animations.
    Not a coder here however I believe I can do more than many professional front end developers with it.
    Performance can be issue. Making everything work in all devices and screen sizes is time consuming when you use more complex animations. WebGL probably gives best performance.

    Now if you are talking about page animations.
    Fake it til you make it way. You manipulate link behaviour with js.
    Basically instead of loading new page you run outro animation at first, then switch url and run intro animation.

    Or real deal. Previously mentioned headless way. Ok well you can make it with plain old js too.
    Headless way basically means that you use wp as admin. And then WP REST API to get data.
    I have previously used it for more simple websites. To load in news and some basic page content.

    For my next WP project I am going to test https://github.com/Dogstudio/hig…
    I hope that I can avoid building full vue.js front end and I can do all the development myself.

    If anyone knows any good wordpress starter theme with scss setup that would be helpful. Sage/roots is too complex for me however many other starter themes seem bit outdated.

    • Highway looks nice, ty for the share.
      We do a lot of these things, mostly for quick agency jobs with vanilla js with a headless wp.
      sted
  • mg331

    monNom - Looking at your url structure...

    http://www.hi.agency/deck/#p1
    http://www.hi.agency/deck/#p2
    http://www.hi.agency/deck/#p3
    etc...

    Are these individual "sections" within an html page that is "deck," or are #p1, #p2 individual html pages that are being served up in this view?

    That stuff always confuses me, especially when it comes to really smooth page-to-page transitions that come with animation, and the url structure visibly changes from, say, url . com/page1.html to page2.html.

    Any insights on that?

    Really nice work on what you shared.

    • Those are in-page anchors. CSS has a :target attribute that you can leverage to slide the page on changing the anchormonNom
    • see line 200 here: view-source:http://w...monNom
    • http://www.hi.agency…monNom
    • OK - so it's a huge page that extends in all directions out of the viewport, basically?mg33
    • My assumption is that it's a one-pager just being moved around.dbloc
    • well I was a little late to that game. Didn't see any comments when I posted mine.dbloc
    • Yes. Though there's nothing stopping you from making the 'pages' iFrames and moving those around.monNom
    • you might also just use "scroll-behavior: smooth;" on the body instead of :target and translatemonNom
  • mg330

    monNom and dpi - do you guys work full time or do freelance work? Always good to know people who are good at this stuff should I ever be looking for freelancers to use at work.

    • I'm freelance/self-emplo... Always happy to discuss new projects! You can reach me at my terribly neglected website: www.hi.agencymonNom
    • Basically freelance. However I am not sure that I am good at it. Learning for fun and mostly just for prototyping or smaller projects.dpi
  • mg330

    I'll add that in many ways, prototyping stuff like this has been incredibly helpful with www.readymag.com. Surprise of all surprises, that simple visual website tool affords me a ton of capabilities I don't get with things like InVision Studio, Adobe XD, Figma, or other tools where I need to trigger things based on scrolling.

    We were going to transition our company blog to RM pages so we could be a bit more experimental with our content, but their lack of SEO control became an issue for us. Too risky to lose ranking and performance we currently have.

    But we've been building prototypes for immersive content work with it for pitches, and it beats spending an infinite amount of time in After Effects only to end up with a video, and not an actual interactive piece. They also just rolled out a video keyframe feature that's triggered on scroll, hover and click, and gives us the ability to export AE videos an integrate them that way.

  • dee-dubs0

    Gasp recently added scrolltrigger to thier kit meaning you no longer have to rely on 3rd party is to get slick animation on page scroll.

    They've also added ton of stuff for responsive and size triggers etc, I've only scratched the surface but it looks really powerful.

    It's pretty performant too! Used it lightly on recent WP site build and still got 95% + results on most pages for load speed in Google Chrome lighthouse.

  • dee-dubs0
  • nocomply1

    For animations specifically, I've gotten a lot of mileage out of this: https://animate.style/.

    There's also a WordPress plugin built around it: https://wordpress.org/plugins/an…

  • sted0

    for themes like kalium:

    https://codecanyon.net/item/visu…

    • Yep - that's what I build pages with. It's pretty nice and that theme has served me well for a few years now.mg33