Jump to content

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. Great ! Thanks @mvaneijgen It is the solution I was searching. Perfect
  2. Hello! I'm trying to improve my animation. I have a lottie animation and a colored circle which appears when the animation is over. Everything works fine, but to make it perfect, I would like the circle to appear a little before the end of the animation. I tried to add a delay to my onLeave function to overlap the lottie animation, but it's not working. If someone has a solution to help me improve my animation it would be perfect Thanks a lot
  3. Thanks @akapowl the first solution with onLeave/onEnterBack callbacks works as I wanted, it's perfect!
  4. Hi! I tried, but this is not the result that I looking for. Using onReverseComplete, the div don't disappear before all the scroll animation up is finished. I would like the div appears when the animation is finished but disappear again when the animation reverse start. I hope I'm clear 😅
  5. Hi everybody! I'm struggling to find when my animation is active or when it's not. I would like to display a div (#my-svg - the purple circle) when the animation is over, after scrolling, which it's working fine now, but when I scroll backwards, I would like that div to disappear. So I tried to find when the animation is active or not but it doesn't work, maybe because I use goToAndStop? I feel like it's not a big deal, but I can't seem to find the right methodology. Thanks for your help
  6. So I found a solution thanks to this topic : By changing the speeds number and the scrub, it works fine on all browser. Thanks everyone!
  7. Thanks, but as I use Lottiefiles, I'm not sure I can : https://github.com/airbnb/lottie-web/issues/89
  8. Thanks for your answer. The thing is that I want to add interactivity at the end of my animation, for people to be able to click on elements that display informations, and I can't do that with canvas rendering. So I will keep looking for a solution. About the image encoding, I'm not sure to know which one to choose. Thanks
  9. Hi guys, I created an animation using Lottiefiles and Scrolltrigger, a bit like the codepen one, which works fine on Chrome and Safari, but not on firefox : https://dev.bklt.fr/test/new.html Apparently Firefox doesn't handle the svg animation very well, but I need this animation to be in svg (not canvas). I tried to optimize my images and my json file, but it changes nothing. Do you ever have this issue? Maybe there is something in my code that I can change to improve it? Thanks
  10. Thanks for your help, I will read the link you send me and try to figure it out
  11. Yes, sorry. My question is do I need to add something to my code to avoid interfering with other elements using Scrolltrigger? My code is the same as the Codepen, with only one #hand element.
  12. Hi! I think you need to empty your cache because I have no error on chrome and firefox. Also, the animation is not smooth at all on firefox, I don't know why.
  13. Hi ! I'm working on a wordpress website using the Rehub Theme which using Scrolltrigger. I created a custom section in html/css and js inspired by the codepen I send. It's an animation using Scrolltrigger and Lottiefile. My issue is that after my custom section, the other animations using Scrolltrigger doesn't works. The other animations are displaying by the theme. I don't know if there is a compatibility problem or if I have to kill my animation at the end. This is the url you can see the all thing : # Thanks
  14. 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.
  15. 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