Leaderboard

First off, if you are working on WordPress and editing themes. You should always create a child theme to make customizations on. It's bad practice to customize your parent theme (or just theme) because if the author of the theme updates their theme and you update it, you will lose all your customizations. If you make customizations on a child theme, you will then be able to safely update the parent theme without losing all your work. Now to help you enqueue. Your code should look like this: function wpb_adding_scripts(){ wp_register_script( 'gsap', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js', array(), '1.0', true ); wp_register_script( 'gsap-settings', get_stylesheet_directory_uri() .'/gsap-options.js', array('gsap'), '1.0', true ); wp_enqueue_script('gsap'); // This is probably not needed since below we are enqueueing the gsap-settings file with has a dependency on the gsap script, so it should enqueue both wp_enqueue_script('gsap-settings'); } add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); This would then enqueue the script properly I believe (haven't tested it but pretty sure it should stop the error). I also added a gsap-settings script, which you can create that js file in your theme at the correct location and write all your animation in there and call gsap. Hopefully this helps!

First of all, thanks for being a Club GreenSock member @utopian! I noticed several problems: You were making one of the most common ScrollTrigger mistakes - you had multiple nested ScrollTriggers inside a single Timeline. That's logically impossible to accommodate because you can't have the parent timeline controlling the playhead AND the scrollbar position also controlling the playhead simultaneously. It's one or the other. You're using invalid start/end values on your ScrollTriggers, like start: "20%", end: "20%". Those are supposed to have TWO values - the first correlates to the trigger's position and the second correlates to the scroller's position, like start: "top 20%" would mean "when the top of the trigger hits 20% down from the top of the scroller". Please read the ScrollTrigger docs. You were using a "scrub" and super tiny duration window (because you set your start and end triggers to be directly on top of each other which is quite odd), so you were forcing the entire animation duration to be whatever the scrub value was - is that what you intended? I noticed you had stagger set to 0.01 and a duration of 0.75 which for your <h2> stuff would end up making a much longer animation (which you then squeezed into 1 second due to the scrub). Again, maybe that was intentional but I have a feeling it was inadvertent The way you set it up would make it always play the same animation backwards/forwards, but you could use a regular ScrollTrigger with an onEnter and onLeaveBack to animate things slightly differently based on which direction the user is scrolling, like this: https://codepen.io/GreenSock/pen/ExwEbQZ?editors=0010 I hope that clears things up. Happy tweening!

Thanks a lot for details. I loved capability of gsap and support forums while using free version. That's the main reasons for me to want to join club. @GreenSock I hope to join soon too.

@rala i just coded a VUE component kinda doing what you want.. sorta say. it's funny that i decided to check this forum the same day i published my code on github hehe.. what are the odds? xD https://github.com/vlbn/fancycursor

This is just awesome. Thank you so much @Cassie and @OSUblake for your help! Really appreciate it!

Yeah, you'd need to kill the old ScrollTrigger and recreate it based on the new sizing. There's some extra logic necessary too which I've added here: https://codepen.io/GreenSock/pen/YzraKgQ?editors=0010 Is that what you're looking for?

Ah ok, I see. Apologies. Misread the question. This should work! https://codepen.io/GreenSock/pen/YzreMro type: "scrollLeft" adds a div, so had to add this to the css .drag-wrapper > div { height: 100%; }

How can I achieve smoke reveal effect same as this website : https://ferrisrafauli.com/ I am new to greensock and I am curious how can I achieve this effect as I didn't get any demo or similar thing on greensock but when I scrap the code of above mentioned website I found greensock name.

Hello @developer53 and welcome to the forums. That smoke effect in the background on mousemove is likely created with WebGL and probably not that easy to realize. While GSAP can also animate things in a WebGL context, you won't be able to create something like that with GSAP alone. I remember a fluid-simulation that looks very close to that background smoke. Click and drag on the canvas to see the magic happen in this sandbox... https://paveldogreat.github.io/WebGL-Fluid-Simulation/ ...and see the code for all that here: https://github.com/PavelDoGreat/WebGL-Fluid-Simulation Maybe that can serve as a starting point for you.

Hey Ulysses and welcome to the GreenSock forums. We actually made a handy questionnaire for helping people figure out which membership is best for them on the Club GreenSock page if you click "Click here for help". In it, you can answer the following questions and it will point you to the most appropriate membership. So tell me: Are there multiple developers working with GreenSock tools (like GSAP)? If not, do you want access to any Club GreenSock plugins? If no to both, no GreenSock Club membership is required, though we think a Club GreenSock membership can open up some fun possibilities for your website. If yes to at least one, one of the Club GreenSock membership would be appropriate but which one depends on how you answer the questions