Pauline Brothier

Thanks you, it's perfect, it helps me a lot!

Hello! I'm working on an horizontal scroll section and inside this section I would like to animate the big text : "We" and "Are". I would like to have a splitText reveal animation, letter by letter, on scroll. The animation works, but only after the page is loaded, not on scroll. I don't know why. Also I would like to know if it's possible to snap the screen when the colored boxes are in the middle of the screen. To make the scroll stop a bit to see the box. Thanks for your help ?

Thanks for your answer. I corrected the end part and I tried my codepen on an other computer and it looks good, no weird gap. So it must be from my mac. The bug is visible on mobile device too. Thanks

Thanks for your answer. I'm on masOS Catalina, MacBook Pro (Retina, 15-inch, Early 2013), processor 2.7 GHz quad-core Intel Core i7, memory 16 Go 1600 MHz DDR3, Intel HD Graphics 4000 1536 Mo. Thanks

Yes ! It's perfect. I couldn't get by with the syntax ? And thanks for the advice too!

Hello! I was wondering how I can be able to run this animation not on load, but on scroll. I tried on my end, but the animation run only one time and I wasn't able to reverse it... Thanks

Hi, It's more visible when you're on fullscreen. You can see it on this video : https://streamable.com/k3n3i1 I'm on Chrome the latest version (102). Thanks

Hi everyone! I try to create a kind of tabs animation, with pinned sections on scroll. It works fine, but when I scroll back to the top to unfold the tabs, I have a small glitch/white space between each pinned section. I don't know how to avoid that. Thank you for your help.

Great ! Thanks @mvaneijgen It is the solution I was searching. Perfect

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

Thanks @akapowl the first solution with onLeave/onEnterBack callbacks works as I wanted, it's perfect!

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 ?

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

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!

Thanks, but as I use Lottiefiles, I'm not sure I can : https://github.com/airbnb/lottie-web/issues/89

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

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

Thanks for your help, I will read the link you send me and try to figure it out

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.

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.

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

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.

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

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.

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