Jump to content
Search Community

Flying Kid

Members

  • Posts

    9

  • Joined

  • Last visited

 Content Type 

Posts posted by Flying Kid

    motionPath - bezier

    in GSAP

    Posted

    Hello all,

     

    i don't understand : 

     

     - how are the control points coordinates calculated, and what exactly are the control points ?

    -  what is the unit of x, y ( pixels ? )

      

    // cubic bezier coordinates (anchor, two control points, anchor, two control points, etc.):
motionPath: {
  path: [{x:0, y:0}, {x:20, y:0}, {x:30, y:50}, {x:50, y:50}],
  type: "cubic"
}

    Thanks !

     

    Steve

    install cdn link on wordrpress

    in GSAP

    Posted

    16 hours ago, Visual-Q said:

    Glad it's working for you, note you shouldn't have to do both. Either hardwire them directly on the page or enqueue them otherwise you may be loading them twice.

    I removed the gsap loading from the enqueued scripts . it's strange that the custom js file with gsap instruction is executed but not the cdn link. Maybe some typo... thanks anyway ! will search for proper fix later. 

    install cdn link on wordrpress

    in GSAP

    Posted

    17 hours ago, Visual-Q said:

    I'm not sure that you can hook two functions in an action in that way. 

     

    I believe you may have to hook the functions separately for wp_enqueue_scripts

     

    add_action( 'wp_enqueue_scripts', 'wpchild_enqueue_styles' );

    add_action( 'wp_enqueue_scripts',  'theme_gsap_script' );

     

    or put all your enqueus in a single function

     

    https://developer.wordpress.org/reference/hooks/wp_enqueue_scripts/

    https://developer.wordpress.org/reference/functions/add_action/

    https://developer.wordpress.org/plugins/hooks/actions/

     

     

     

    22 hours ago, GreenSock said:

    Yeah, it looks like you're not loading GSAP at all on that page. If you "view source" and do a search for "gsap", it finds nothing. 

     

    These forums are more for GSAP-specific questions, but this sounds like a WordPress question so I'm not in a great position to help, sorry. Perhaps someone else around here can chime in. 

     

    22 hours ago, PointC said:

    Something to try would be to skip the enqueue and place the GSAP link and your custom JS link into the footer file of your theme. Just put them right before the closing <body> tag like you would a static web page. It's not the 'proper' way to do it in WordPress, but it works fine. That might give you an idea of where the problem may be.

     

    Just an idea. :)

     

     

    Hello guys,

     

    thanks for helping! I added the loading script of gsap directly in the html of the page concerned, and separated the 2 enqueuing functions in my php file. Works !

    • Like 2

    install cdn link on wordrpress

    in GSAP

    Posted

    1 hour ago, PointC said:

    Yeah, tough to say without a demo for sure.

     

    It's not the cause of your problems, but I notice you have durations in both the from vars and to vars of those fromTo tweens. You should have that in the to vars. You also have a stagger on targets with an ID and ID's should be unique so I'm not sure what's staggering there. You could also put those tweens on a timeline and you wouldn't need all those delays. Just my two cents. :)

     

    If you'd provide a demo or link, we can take a look for you.

    Hi Point C,

     

    i'll clean my code with your remarks and try to add a timeline, thanks! (i'm a total beginner)

     

    I added some info in my post above

    install cdn link on wordrpress

    in GSAP

    Posted

    I must precise i'm a complete beginner and know very little about code. 

     

    I'm confused about the DOM/GSAP load/GSAP order. I'm not sure which code goes in which file

     

    1. Link to the webpage : https://ppgames.fr/accueil-new/

    2. i added the DOM loading completion in the javascript file with gsap orders (is it right ?)

      

    
// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {
  
  console.log("DOM loaded");

  // wait until images, links, fonts, stylesheets, and js is loaded
  window.addEventListener("load", function(e) {
    
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});

     console.log("window loaded");
    
  }, false);
  
});

    3. the gsap loading should occur in the functions php file ? 

    4. demo of the result on codepen : 

    See the Pen dyMMLxy by Flying-kid (@Flying-kid) on CodePen

     

    Thanks Jack !

     

    install cdn link on wordrpress

    in GSAP

    Posted

    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)

     

    image.png.fd510e03a72a38fa4ae35b12fedf935c.png

     

    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

     

     

    image.png

×
×
  • Create New...