• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Using on-scroll for moving graphics onto screen from left on Minimum Pro

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Using on-scroll for moving graphics onto screen from left on Minimum Pro

This topic is: not resolved

Tagged: animating graphics, css animations, minimum pro theme, on-scroll

  • This topic has 9 replies, 2 voices, and was last updated 6 years, 4 months ago by asbilly92.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • August 17, 2016 at 7:57 am #191449
    asbilly92
    Participant

    I'm trying to possibly use some type of animation or on-scroll to move some graphics into view on a home page as the viewer scrolls down to that point. Have tried a few ways but so far, not working; looking for some guidance.

    I'm trying to move the three (will be 4) graphics; that are under the slider onto the screen from the left as the viewer gets to that point. I'm trying to make it as simple as possible, but realize it might not be. Can anyone make any suggestions as to how to achieve this? I don't want anything crazy or fast, just a subtle movement so they appear one after the other, and then slide over to their normal position.

    Here's the site that I want to add it to

    ________________________________________________________________________________________

    EXAMPLE OF WHAT I'M LOOKING FOR

    Go down to their first example called: slide in from left.

    Any help would be great!

    Thank you ahead of time 😉

    http://www.djccoreconsulting.com/
    August 18, 2016 at 8:18 am #191531
    Christoph
    Member

    Hi,

    the Codepen to that article has pretty much everything you need: http://codepen.io/SitePoint/pen/MwEaQM
    Adjust markup and CSS classes so it makes sense (you more than likely don't need all the selectors for headings and text...)
    Create and upload a .js file with the JS code and enqueue it in functions.php.


    https://www.christophherr.com | Genesis Customizations | Buy me a coffee

    September 13, 2016 at 3:50 pm #193117
    asbilly92
    Participant

    Using the CodePen code for the js i'm confused about how I would title the js script file, would it be animation_elements.js? I know that I can name it what ever I might like but using their exact example would that be the correct name for the js file I need to upload?

    September 13, 2016 at 8:35 pm #193131
    Christoph
    Member

    Hi,

    it's better to use a dash and not an underscore.
    animation-elements.js


    https://www.christophherr.com | Genesis Customizations | Buy me a coffee

    September 16, 2016 at 6:57 am #193235
    asbilly92
    Participant

    OK great. To make that code-pen actually work though would that be the correct title for the js file?

    (animation-elements.js)

    Sorry, I'm tying to use this as a learning experience so want to set it up just like that pen to make it work and not understanding, for that exact example what to title the .js file......

    I appreciate your help 😉

    September 16, 2016 at 9:31 am #193242
    Christoph
    Member

    Hi,

    There is no "correct title".
    As you already said, the name really has nothing to do with making the code work.
    To get it to actually "work", you have to enqueue that file in functions.php.
    That´s the only time the name of the file is actually used.

    I like to use file names that describe what a file does.
    Naming it scroll-animations.js
    seems a bit more intuitive to me.


    https://www.christophherr.com | Genesis Customizations | Buy me a coffee

    September 16, 2016 at 9:45 am #193246
    asbilly92
    Participant

    OK but in a post above you said:

    Create and upload a .js file with the JS code and enqueue it in functions.php.

    So if I upload the .js file doesn't it need a name ? I know it needs to be enqueued; but doesn't it need a name to enque it with and a file name inside the js folder?

    I will get you another coffee lol!

    September 16, 2016 at 3:21 pm #193259
    Christoph
    Member

    Nowhere am I saying that you don't have to give the .js file a name.
    I´m saying what you name it is irrelevant.
    You can name it "day-at-the-beach.js", "best-javascript-ever.js", "name.js" or whatever you like to name it - as long as you use the same file name when you enqueue it.


    https://www.christophherr.com | Genesis Customizations | Buy me a coffee

    September 20, 2016 at 3:57 pm #193440
    asbilly92
    Participant

    OH ok I got it now ! I will give it another try!

    Thank you!

    September 21, 2016 at 10:20 am #193473
    asbilly92
    Participant

    OK I put this into my functions.php file for enquing the script; where as : animation_left_script is the name of the function and scroll-animation.js is the name of the js file. Think I'm getting closer but the content isn't showing on the page other than the normal text. Do I have that function coded properly?

    I do have the js file loaded into the js directory of my child theme.

    // Enqueue animation on scroll from left
    
    add_action( 'wp_enqueue_scripts', 'animation_left_script' );
    
    function animation_left_script() {
        wp_enqueue_script( 'scroll-animation', get_stylesheet_directory_uri() . '/js/scroll-animation.js', array( 'jquery' ), '', true );
    }
     

    Thank you!

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble