Hello all,
The svg i wanted to animate on my webpage, doesn't
1. i copied the script for linking the gsap script into my child theme functions.php file
<?php
/* Chargement de la feuille du style du theme parent */
add_action( 'wp_enqueue_scripts', 'wpchild_enqueue_styles', 'theme_gsap_script' );
function wpchild_enqueue_styles(){
wp_enqueue_style( 'wpm-storefront-style', get_template_directory_uri() . '/style.css' );
}
// The proper way to enqueue GSAP script
// wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
function theme_gsap_script() {
wp_enqueue_script( 'gsap-js','https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.0/gsap.min.js', array(), false, true );
wp_enqueue_script( 'gsap-js1', get_template_directory_uri() . '/custom-js/gsap-script.js', array(), false, true );
}
?>
2. i added a folder container the javascript files (custom-js)
3. here is my gsap code (which is working on codepen gsap demo page)
gsap.fromTo("#root", {duration:1, scale:0,transformOrigin:"50% 100%"},{duration:2, scale:1,stagger:0.1});
gsap.fromTo("#branch-1", {duration:1,scale: 0,transformOrigin:"0% 100%"},{duration:2, scale:1,stagger:0.1,delay:1.5});
gsap.fromTo("#branch-2", {duration:1, scale:0,transformOrigin:"100% 100%"},{duration:2, scale:1,stagger:0.1,delay:1.5});
gsap.fromTo("#branch-3", {duration:1, scale:0,transformOrigin:"50% 100%"},{duration:2, scale:1,stagger:0.1,delay:1.5});
gsap.fromTo("#branch-4,#branch-5,#branch-6, #branch-7,#branch-8,#branch-9,#branch-10,#branch-11", {duration:1, scale:0,transformOrigin:"50% 100%"},{duration:2, scale:1,stagger:0.1,delay:2.5});
gsap.fromTo("#branch-12,#branch-13,#branch-14, #branch-15,#branch-16,#branch-17,#branch-18,#branch-19,#branch-20,#branch-21,#branch-22", {duration:1, scale:0,transformOrigin:"50% 100%"},{duration:2, scale:1,stagger:0.1,delay:3.5});
gsap.fromTo("#leaf-1,#leaf-2,#leaf-3,#leaf-4,#leaf-5,#leaf-6,#leaf-7,#leaf-8,#leaf-9,#leaf-10,#leaf-11,#leaf-12,#leaf-13,#leaf-14,#leaf-15,#leaf-16,#leaf-17,#leaf-18,#leaf-19", {duration:1, scale:0,transformOrigin:"50% 100%"},{duration:2, scale:1,stagger:0.1,delay:4.5});
gsap.fromTo("#leaf-20,#leaf-21,#leaf-22,#leaf-23,#leaf-24,#leaf-25,#leaf-26,#leaf-27,#leaf-28,#leaf-29,#leaf-30,#leaf-31,#leaf-32,#leaf-33,#leaf-34,#leaf-35,#leaf-36,#leaf-37,#leaf-38,#leaf-39,#leaf-40,#leaf-41,#leaf-42,#leaf-43,#leaf-44,#leaf-45,#leaf-46,#leaf-47,#leaf-48,#leaf-49,#leaf-50", {duration:1, scale:0,transformOrigin:"50% 100%"},{duration:2, scale:1,stagger:0.1,delay:5.5});
gsap.fromTo("#leaf-51,#leaf-52,#leaf-53,#leaf-54,#leaf-55,#leaf-56,#leaf-57,#leaf-58,#leaf-59,#leaf-60,#leaf-61,#leaf-62,#leaf-63,#leaf-64,#leaf-65,#leaf-66,#leaf-67,#leaf-68,#leaf-69", {duration:1, scale:0,transformOrigin:"50% 100%"},{duration:2, scale:1,stagger:0.1,delay:6.5});
Does someone see where is my mistake ?
Thank you!
Steve