Custom WordPress Theme Development (2022) #27 - Adding Gsap green sock animations into wp theme.
This is the 27th video in the series , where i show you guys how to start adding greensock animations to your custom wordpress theme
1. Register and enqueue script for the minfied version of gsap
1.1 register your custom scripts file for example gsap-custom.js and add the aniamtions you want there
wp_register_script( 'gsap', 'https://cdnjs.cloudflare.com/ajax/lib..., array(), false, true );
wp_enqueue_script('gsap'); // This is probably not needed since below we are enqueueing the gsap-settings file with has a dependency on the gsap script, so it should enqueue both
/*-enqueue laravelmix js script start -*/
wp_register_script('gsap-custom.js', get_template_directory_uri() . '/assets/vendor/gsap/js/gsap-custom.js', [], 1, true);
wp_enqueue_script('gsap-custom.js');
2. Add your custom html or the example in your template file for example aboutus.php in the included folder
get it from https://greensock.com/get-started/
3. Add custom animations scripts inside your gsap-custom.js file
for example
CSSPlugin.defaultTransformPerspective = 400;
gsap.to(".green", { duration: 3, rotationX: 360 });
gsap.to(".orange", { duration: 3, rotationY: 360 });
gsap.to(".grey", {
duration: 3,
x: 100,
y: 100,
scale: 2,
skewX: 45,
rotation: 180,
});
Useful links
1. Green Sock Get Started
LINK: https://greensock.com/get-started/
2. Green Sock Scroll Magic
LINK: https://greensock.com/scrollmagic
3. How to add gsap animations to wordpress
LINK:https://greensock.com/forums/topic/30...