common.js:
// Import Barba.js
import barba from '@barba/core';
import home from './home';
// Import GSAP
import { gsap } from 'gsap';
export default {
common.js:
// Import Barba.js
import barba from '@barba/core';
import home from './home';
// Import GSAP
import { gsap } from 'gsap';
export default {
| Basic setup for using Swup page transitions and GSAP in a Wordpress site. | |
| Notes (Will update as time goes on) : | |
| 1. Be sure that if you use ID's on elements there is only one throughout the site. | |
| Since there is no actual page load Chrome has issues determining that you are not | |
| using the same ID multiple times. |
| This allows your gravity forms to load via ajax to ensure they work correctly with page transitions that have no window/document.onload |
Barba.js is a library using pushState and AJAX allowing websites to load pages asynchronously while still maintaining browser states and history.
Combining it with some JavaScript animations libraries can help craft some memorable browsing experiences.
In this guide, we will try to find an optimal way to integrate Barba with our beloved Sage theme !
| //The following section is an add-on to this tutorial - https://tri.be/gravity-forms-events-calendar-submissions/ | |
| //Shout to CreativeSlice.com for their initial work | |
| /* Before Starting: | |
| - Make sure you have these three plugins installed | |
| - Gravity Forms | |
| - The Events Calendar | |
| - Gravity Forms + Custom Post Types | |
| - Once Gravity Forms is installed, create a form with these fields | |
| - Single Line Text (Event Title) | |
| - Paragraph Text (Event Description) |
| <?php | |
| $args = array( | |
| 'post_status'=>'publish', | |
| 'post_type'=>array(TribeEvents::POSTTYPE), | |
| 'posts_per_page'=>10, | |
| //order by startdate from newest to oldest | |
| 'meta_key'=>'_EventStartDate', | |
| 'orderby'=>'_EventStartDate', | |
| 'order'=>'DESC', |