Leaderboard

Hey, You need to pass a function to onComplete like this: // normal function onComplete: function() { console.log('finish') } // arrow function onComplete: () => { console.log('finish') } Gsap calls your function something like this: onComplete(). On your logic gsap would call it like: console.log('finish')() which throws an error. Hope this clears up.

The examples you show are much more complex and your version has multiple ScrollTriggers and multiple timelines which for sure makes it hard to debug or even figure out what is going on. Mine just has one ScrollTrigger and one timeline, simple, concise and works. Why do you want to make it so complicated? https://codepen.io/mvaneijgen/pen/ExEBKVx?editors=0010 Also what is the reason you're using Smooth Scrollbar.js and SplitType.js, these are both libraries not from GSAP, so have no guarantee to play nice with GSAP. You are free to use them off course, but it is a bit weird to ask for help on a forum that has nothing to do with these plugins. Also GSAP has perfectly capable plugins that seem to tackle the same use case, but DO play nicely with the all the other GSAP plugins, so to me it seems like a no brainer to use these instead, but of course don't feel forced to use them. https://greensock.com/docs/v3/Plugins/ScrollSmoother https://greensock.com/docs/v3/Plugins/SplitText

Hey, Came back with a change. This is what you're looking for ? https://codepen.io/danielmtd/pen/xxWowrp Also the example you given it's more of a hooking a timeline to the scroll and scrubbing it. There are quite a few examples in here: https://greensock.com/st-demos/ that can help you achieve this. How I'd tackle a problem like this is: - creating a timeline - debugging it using gsDevTools - creating the scrolltrigger and addig the animation to it.

Hey @velkas, I think one approach that you should try is to use layouts and persistent nested layouts in your app. The approach you have in your last sandbox sample is no good since everything is being re-rendered everytime you go to a different route. I recommend you to check these links in order to get a better grasp of these concepts: https://nextjs.org/docs/basic-features/layouts#per-page-layouts https://adamwathan.me/2019/10/17/persistent-layout-patterns-in-nextjs/ https://www.cutintothejamstack.com/articles/dynamic-content-nextjs-shared-layouts I've used some of the concepts in Adam Wathan's article in a SaaS built on top of Next, but never applied to page transitions, but it should help you get started to persist some state data using the Flip Plugin (like @Cassie's Vue example). Also you could explore Next's dynamic imports and see if those can be of any help. Unfortunately I don't have time right now to set up an example of this approach applied to page transitions, but hopefully those links are enough to get you started. Also take a look at this video since is from 2021. While Adam's article is great and most of the features you see in it should still work in Next, it's from 2019, which is a bit outdated in web-dev years : Happy Tweening!!!

Hey, The .set method applies those properties on load without animating them. If you want to animate both properties at the same time you can add the rotation and x in gsap.to / or .from / or .fromTo depending on what you want to achieve . If you want to chain them you can create a timeline and add those tweens to it. Here you can find some helpful insights: https://greensock.com/docs/v3/GSAP https://greensock.com/docs/v3/GSAP/Timeline Here is a simple example that may help you understand how it works. https://codepen.io/danielmtd/pen/RwMzoKg

thank you! in make case this code worked gsap.to(window, { scrollTo: smoother.offset(section, "0 0"), duration: 0.3, ease: Power4.easeOut }),

Hey @NickWoodward I think @GreenSock was actually saying that keeping everything in one timeline also isn't good. In situations like this where there are multiple different states that you have to navigate through it is better to dynamically create tweens instead on demand. based on your loop I assumed there would one day be multiple arrows and only 1 would ever be active at a time (facing up or down). You have 3 states: right, up, and down. Clicking when direction is right OR up spins the arrow down. Clicking when the arrow is down can only spin it up. Clicking an arrow can only spin it up or down so there is a conditional check that will create the proper tween. Once you interact with an arrow I loop through all the arrows and reset all the ones you aren't clicking on. There are probably half a dozen ways to handle this, but this was the easiest for me to get working quickly with the least amount of code. https://codepen.io/snorkltv/pen/bGvyXQY?editors=0010 I have a 3 Part series: Breaking Free of the Timeline Mindset in my B-sides, Bonuses, and Oddities course. It highlights why timelines aren't great when you need a high level of interactivity AND how creating functions to handle state changes is much more flexible. hope this helps. Carl

Wow and thats it! thank you so much. ?