Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Pauline Brothier

  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Pauline Brothier's Achievements

  1. Thanks for your answer. The element ID on line 46 does exist. The issue doesn't come from there. The none dynamic version (html, css and js) works fine. I really think the issue comes from the loading scripts with wordpress.
  2. Hi, I'm struggling with my scripts on wordpress. On my home page I haven't any trouble with gsap ans ScrollTrigger, both working fine. But on my agency page, I have error in the console and ScrollTrigger doesn't work. I looked topics about this, but I didn't find a solution which works for me. You can watch the production website with errors here : https://dev.bklt.fr/ggr-wp/agence/ In my functions.php : function html5blank_header_scripts() { if ($GLOBALS['pagenow'] != 'wp-login.php' && !is_admin()) { wp_register_script('conditionizr', get_template_directory_uri() . '/js/lib/conditionizr-4.3.0.min.js', array(), '4.3.0'); // Conditionizr wp_enqueue_script('conditionizr'); // Enqueue it! wp_register_script('modernizr', get_template_directory_uri() . '/js/lib/modernizr-2.7.1.min.js', array(), '2.7.1'); // Modernizr wp_enqueue_script('modernizr'); // Enqueue it! wp_register_script('gsap', get_template_directory_uri() . '/js/lib/gsap.min.js', array(), '3.6.0', false, true); // Greensock wp_enqueue_script('gsap'); // Enqueue it! wp_register_script('scrolltrigger', get_template_directory_uri() . '/js/lib/ScrollTrigger.min.js', array(), '3.6.0', false, true); // ScrollTrigger wp_enqueue_script('scrolltrigger'); // Enqueue it! wp_register_script('agencescripts', get_template_directory_uri() . '/js/agence.js', array('jquery'), '1.0.0'); // Page agence scripts wp_enqueue_script('agencescripts'); // Enqueue it! wp_register_script('html5blankscripts', get_template_directory_uri() . '/js/scripts.js', array('jquery'), '1.0.0'); // Custom scripts wp_enqueue_script('html5blankscripts'); // Enqueue it! } } add_action('init', 'html5blank_header_scripts'); My agence.js (function ($, root, undefined) { $(function () { 'use strict'; // DOM ready, take it away let gasp_horizontal_scroll = null; gsap.registerPlugin(ScrollTrigger); //DESKTOP if (window.matchMedia("(min-width: 1024px)").matches) { jQuery(document).ready(function () { //initialisation du scroll horizontal agence init_horizontal_scroll_agence(); //initialisation de la progress bar init_progress_bar(); }); function init_progress_bar() { gsap.to('progress', { value: 100, ease: 'none', scrollTrigger: { scrub: 0.3 } }); } function init_horizontal_scroll_agence() { let container_agence = document.getElementById("container_agence"); if (gasp_horizontal_scroll == null) { gasp_horizontal_scroll = gsap.to(container_agence, { x: () => -(container_agence.scrollWidth - document.documentElement.clientWidth) + "px", y: 0, ease: "none", scrollTrigger: { trigger: container_agence, invalidateOnRefresh: true, scrub: 1, pin: true, end: () => "+=" + container_agence.offsetWidth } }); } } } }); })(jQuery, this); If someone have a solution it will be perfect ! Thanks
  3. Hi Zach, The issue is that when I'm using this code on a simple code pen demo, it works : https://codepen.io/PaulettePaillette/pen/MWjeqdb It's when I try to use it on my web page that it doesn't work, and I don't know why.
  4. Hello Gsap community ! I'm struggling with the horizontal scroll on a website 😓 : https://dev.bklt.fr/ggr/ Now everything seems to work, but my progress bar doesn't. It doesn't follow the current width of the page. I used ScrollTrigger and my code looks like that : <progress max="100" value="0"></progress> gsap.registerPlugin(ScrollTrigger); gsap.to('progress', { value: 100, ease: 'none', scrollTrigger: { scrub: 0.3 } }); If anyone has any idea how can I fix this, that will be great! Thanks
  5. Hi, Thank you both for helping me! I tried your solution on the website I'm working on @akapowl, it's perfect! I didn't have the right logic. Thank you so much 😊 Cheers, Pauline
  6. Hello ! I'm new with scrollTrigger and I don't understand how I can pin elements inside my horizontal scroll section. For example, in this codepen : https://codepen.io/PaulettePaillette/pen/MWjeqdb I would like the scroll to stop when the number 3 (grey div) "touch" the left side of the screen. And then the number 4 scroll above the number 3 section and the classic horizontal scroll continue. I think it's possible, I hope, but I don't understand how to make it. I hope my issue is clear, and someone could help me on it. Thanks