Leaderboard

If you make your clickable elements elements that are recognized as clickable elements (eg button, which is also better of accessibility) you can set dragClickables: false, and everything works as expected You can also create your own clickableTest This is all from the docs, so be sure to read through it once, just to get familiar with everything that is possible out of the box. Hope it helps and happy tweening! https://gsap.com/docs/v3/Plugins/Draggable/ https://codepen.io/mvaneijgen/pen/mdgVoEr

I've never seen someone put <style> tags nested inside of a <div> like that! Hm. Well, here's a method that'll solve it for you - it just temporarily removes the <style> tags and puts them back after the split: function styleSafeSplit(target, vars) { let targets = gsap.utils.toArray(target), styles = targets.map((target, i) => { // remove all the <style> elements let s = gsap.utils.toArray(target.querySelectorAll("style")); s.forEach(el => el.parentNode.removeChild(el)); return s; }), split = SplitText.create(target, vars); styles.forEach((s, i) => s.forEach(style => targets[i].appendChild(style))); // insert the <style> elements again return split; } Use it the same way you would use SplitText.create(...) styleSafeSplit("#text", {type:"chars,words"}); https://codepen.io/GreenSock/pen/VwNeqNB?editors=1010 Does that help?

Hi @abernal96 welcome to the forum! Great illustration and great demo! Sharing this makes helping you a breeze, great work! A small note to start, be sure if you fork something to always update GSAP to the latest versions. In your example you'd loaded version 3.9.1 and we are currently at version 3.12.5, so if there were any bugs they would be fixed using the newest version! If you open the JS panel you get a search box and this way you can load most of the popular plugins including all GSAP plugins (even the paid once!) and below here a codepen which just always loads the latest versions of all the plugins, which I personally use to start a new project. https://codepen.io/GreenSock/pen/aYYOdN This helped me understand snap, so maybe it also does you. Snap snaps to a value between 0 and 1, where 0 is the start of the ScrollTrigger and 1 the end. As you have done you can do some fancy calculations, but it is maybe also good to understand what it is doing. You can feed an array to the snap value and this helped me understand it. You want to snap to the start, end and the middle, so if you feed it an array like so [0, 0.5, 1] it would do that. If you would log the value you set now 1 / (videoSections.length - 1) you will see that this gives you the value 0.5, which means it will snap to each value with increments of 0.5, so that would also be 0, 0.5 and 1. If you want to also snap the the initial slide on page load you'll need to create another ScrollTrigger which has the trigger that starts on the top of the browser and then has the end trigger of the top of your .horizontal_container then you can set a snap value of snap: 1, which will make it snap to the end of the ScrollTrigger you've created. I’ve placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/oNObWKN?editors=0010

Hi @christopherha and welcome to the GSAP Forums! I wouldn't call it a pattern soto speak, is more about the right tool for the right job. When animating routes (especially when you want to animate the entire page) the conundrum is to animate out the current route, unmount it when the animation is completed, then mount the page for the next route and finally animate that page in. Routing in these type of frameworks doesn't have a timing or anything of the sort to handle that. React Transition Group does that, that's why we use it. Unfortunately React hasn't pay attention to animations (unlike Angular, Vue and Svelte - just to mention three) so there is no way for developers to handle that directly with React, hence the solution has to come from third party libraries. There is no documentation on this particular subject because there is not a lot to document actually, it basically stems from my explanation above: Change route Animate current route out When animation out is complete, unmount current route Mount next route Animate next route in The demo you see is the simplest and most reliable way to handle all that, trust me, before Transition Group created the SwitchTransition component was even more convoluted and complicated. That's why (and I know this is not your case) when people are starting I recommend leaning towards either Vue or Svelte rather than React: Hopefully this clear things up. Happy Tweening!

Thanks, the problem was not import index.js But I had to import the complete path, in this way works fine.