Leaderboard

Have you seen DrawSVG https://gsap.com/docs/v3/Plugins/DrawSVGPlugin/. Check out @PointC tutorial how to do with with dashed paths https://www.motiontricks.com/svg-dashed-line-animation/ I would also recommend when creating a timeline to put the ScrollTrigger on the timeline, to prevent confusion later in development, because individual tweens can't have ScrollTrigger of them selfs, only a timeline can! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/jOJJavR?editors=0010

Great, I'm not sure if I'm reading it correct, but your issue is solved, right!? Yeah wrapping the element in an extra one can really do the tick some times. You of course still can animate the same element twice with the same property it only needs some more prep and if you can target another element it is usually better. Again welcome to the forum and happy tweening!

It looks like you're rolling your own draggable instance, I would highly recommend taking a look at the Draggable plugins https://gsap.com/docs/v3/Plugins/Draggable/ which is really robust and has a lot of features build in.

Hi mvaneijgen, Thanks so much for this. I don't quite understand the offset though. Regardless how I set these values, The markers are not in line with the nav items... Regarding mix-blend-mode, I had thought of using this as a simple solution too, however as it is a fixed navigation above not within the background sections, the background-colors of the sections have no relation to it so this won't work. As I have GSAP incorporated anyway for other animations it seemed the best solution to use it for the nav also. I'll post the results.

I would create a timeline for your header and footer animation and set it to paused: true. Then check based on currentIndex if you're at the frist slide or the last slide and then call .reverse() on that timeline and on any other slide call .play(), I've moved the if () logic to underneath the currentIndex = index; so that the values are between 0 and the amount of slides. Codepen is currently down, so I can't fork your pen. (will try later if it is fixed). Here is the code that I made it work for me // Create the timline somewhere beneath your js variables const htl = gsap.timeline({ paused: true, }); htl.to(items, { autoAlpha: 1, zIndex: 3 }); // then under currentIndex = index; // Add the folowing code if (currentIndex === 0 || // Reverse if we're at the frist slide OR! currentIndex === sections.length -1) {// Reverse when we're at the last slide htl.reverse(); } else { // Any other slide call .play() on the timeline htl.play(); } Hope it helps and happy tweening! Codepen is back up! https://codepen.io/mvaneijgen/pen/mdooOzr?editors=0010

Hi, I'm not in front of my computer now so I can't really go about what Flip does and how it works, I recommend you to check the docs for that: https://gsap.com/docs/v3/Plugins/Flip/ We do have a couple of demos of Flip in react, here is a CSS grid transition: https://stackblitz.com/edit/react-w54qpa?file=src%2FApp.js Here is another using reparenting: https://stackblitz.com/edit/vitejs-vite-bpwfpk?file=package.json Hopefully these demos help you getting started. Happy Tweening!

hi @Supachai is it possible to share your demo ? in case you need to create a new quick demo https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters

In this case the onComplete callback gets triggered when the timeline called tl in @PointC's example is completed and it will then do everything that is inside that callback, in this case it only sets the body's CSS property of overflow to visible; If you want it to do more you have to tell it to do more. This all is all basic Javascript so I would highly recommend touching up on how Javascript works if you want to get serious in using GSAP in your projects. In your case you probably want to create a function that also gets called in the onComplete callback and in that function do all the rest of the logic that is needed on your page, but only gets triggered when the preload animation has finished. Hope it helps and happy tweening!

Sure: ScrollTrigger.clearScrollMemory(); window.history.scrollRestoration = "manual"; https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.clearScrollMemory() https://developer.mozilla.org/en-US/docs/Web/API/History/scrollRestoration

Thanks @Shrug ¯\_(ツ)_/¯, your example was helpful. I think it came out very close to that GIF https://codepen.io/sebastien-gilbert/pen/VwLzvGV