Leaderboard

Hey @fernandocomet, There are several options: https://codepen.io/mikeK/pen/ZEGyeEr https://codepen.io/mikeK/pen/NWXPpde??editors=1010 Do you mean something like that? Happy tweening ... Mikel

Ahhh, OK. Hopefully this is enough to get you started: https://nextjs.org/docs/api-reference/next/link#if-the-child-is-a-functional-component Unfortunately, as far as I know, the Link component doesn't expose a ref to the DOM element being rendered, so you have to create one by yourself using a component (as shown in the docs). Perhaps @elegantseagulls has some experience with this, normally the hover effects I add to links are quite simple and I create them with CSS transitions (this probably is going to cost me in the future ). Given what you're trying to achieve, you could also create a codepen sample in order to get a glance of what you're trying to do and port that to another sandbox using Next. Happy Tweening!!!

Heya! Yep, they're all moving together because you're feeding in exactly the same xPercent and yPercent values for each icon. These snippets here are getting a range between -20 and 20 based on the mouse position and then using that to set the x value. Whether you do this logic multiple times in a loop or just once it's going to get the same result unless you put some logic in there to tell it differently! mapWidth = gsap.utils.mapRange(0, innerWidth, -20 , 20); .... xPosition = mapWidth(event.clientX); .... gsap.to(icon, { xPercent: xPosition, }) Also - there's really no need to set up an event listener and mapRange and everything for every icon! You can just do that once. Here's an option - using the index value to move the icons slightly differently. https://codepen.io/GreenSock/pen/wvpBejP?editors=1010 My main advice would be not to avoid just copying the code from tutorials, try to read and understand the logic behind it, then you can write code that moves the icons exactly how you want! You have the mouse position x and y, you've mapped them into a useable range, now you just have to tweak those values to get the movement you need.

NextJS does not support ES Modules so you'll need to use the UMD files located in the dist folder. import { ScrollTrigger } from "gsap/dist/ScrollTrigger"

This gist tried to extract relative things from the documentation into a more concise list, it may help you some? https://gist.github.com/lunelson/7d83ca0c8bdfab170dd3. As stated "Standard CSS properties are all supported, with hyphenated-names becoming camelCaseNames." so the following list might help you some. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties. I think GreenSock would need a ScrollTrigger enabled infinite scrolling page to even remotely try to list what all GSAP can animate. ?

Hey y'all! ? Looks like `startDrag` was the piece of magic I was looking for ? Thanks for sharing that one. I think this solves the issue of trying to align the slider proxy handle with the slider thumb because wherever you click, it will align, which is perfect ✨ Happy to be here! Thank you for both of your inputs. Love learning new parts of the API to solve these little challenges ? TIL "startDrag" ? Now I can start writing this one up ? Thanks again! ＼ʕ •ᴥ•ʔ／

You can also just use one scrollTrigger https://codepen.io/GreenSock/pen/LYeEzgM?editors=0011

Your animation code doesn't care what images are in your animation, so you can easily create a demo with your images swapped out, which I suggest if you want a good answer to your question but what I would do is create a separate timeline with the animation you just want to have play, make that a function and call that function onStart of the scrollTrigger timeline. This way the animation will just start playing no matter if the user is scrolling or not.

Hello @mercurymirror and welcome to the GreenSock forums. If this is about route/page transitions, perhaps this post could be helpful: If not, please provide a live editable sample using either codesandbox or stackblitz. Happy Tweening!!!

Hey @BUMBLE-BEE, Welcome to the GreenSock Forum. Check out GSAP ScrollTrigger and the many examples there. This is the tool and these are the suggestions that will help you. Happy tweening ... Mikel

Yeah , I was about to suggest something similar to what mikel did. I'm not sure if that is any more helpful than what you already did yourself there, though. https://codepen.io/akapowl/pen/KKZKeOQ

Hey @iDad5, You could use ScrollTrigger.addEventListener. Here an example https://codepen.io/mikeK/pen/RwWXbXb/c1099fe6d3d8c43ec2b928f006551450?editors=1010 Happy scrolling ... Mikel

nice work @mvaneijgen The reason the rotation would continue is because the timelines that were playing when you clicked the buttons again were still playing. In other words there were multiple concurrent timelines affecting the same boxes. I went ahead and created global references to the timelines when they are created child1, child2 and then I kill() them before assigning the new animations to them https://codepen.io/snorkltv/pen/ZEvEQjB?editors=0010 Thanks so much for helping out around here! @gloria-dee this seems to work, but frankly I would do my best to avoid situations like this. I would reserve master timelines with nested timelines solely for situations where you have a long linear navigation where you desire global play, pause, reverse, or scrub controls. Once you start needing independent control of child timelines or tweens it can get pretty messy as you are basically expecting timelines to do things that kind of break the logic of what they were intended to do. Child timelines render based on where they are relative to the parent timeline's playhead position. As the parent's playhead advances the child timeline's playhead stays locked in place with the parent's so that everything renders as it should at the right time. Imagine a timeline has a child tween that starts at a time of 1 and is 2 seconds long, making it end at timeline.time(3) [--parent timeline --] ----- 1 ----- 2 ----- 3 ----- <child tween > Both timeline and child tween end at time(3) When the parent timeline is at a time(3) it knows the child tween should render at its end time(2) If you monkey with the child tween and try to restart() it you set its playhead back to a time(0) which is at the parent's time(1)... but the parent's playhead hasn't moved. The parent can only render child animations based on where it's own playhead is. Once you start trying to control child timelines and tweens independently you get into a situation where you need to understand smoothChildTiming which keeps the playheads all aligned by moving the child aniamation's startTime(). It is admittedly quite a bit to wrap one's head around. Don't feel bad if you don't understand it. My explanation above could probably use some work.

Several people have asked about this effect, and my advice is to do something else as this is super complicated. The problem is that collapsing the previous section will move everything up, so what was once in the middle of the viewport will be shifted up. It might be easier if you just expanded everything and forgot about the collapsing part.

Hi @rajibola As we state in the forum guidelines we don't have capacity to create custom effects. We are more than happy to answer GSAP-specific questions though. So if you give this effect a go yourself and get stuck in the process, feel free to post a minimal demo here and we'll give you some advice on how to get closer to your goal. These articles may be a good place to start

Thanks for the demo, that really helps! What I have right now is a separate timeline for your images. This is a full timeline and not just a GSAP tween, because you want to have control over it. This timeline is called when the ScrollTrigger `onEnter` is triggered and when `onLeave` is trigged the timeline plays in reverse. These animations run completely on there own and have nothing to do with the scrub animation of your main ScrollTrigger. https://codepen.io/mvaneijgen/pen/abEzLBE?editors=0010

I think you were looking for the ScrollTrigger's "scroller", not "trigger". Here's an idea: let autoScrollSpeed = 100, // pixels per second scrollTimeout = gsap.delayedCall(2, () => { // use a delayed call for however long you want to wait after scrolling stops (2 seconds here) if (tl.progress() < 1) { // if it's not done, gsap.to(window, { scrollTo: tl.scrollTrigger.end, duration: (tl.scrollTrigger.end - tl.scrollTrigger.scroll()) / 100 * autoScrollSpeed }); } }).pause(); // pause it initially ScrollTrigger.addEventListener("scrollStart", () => scrollTimeout.pause()); ScrollTrigger.addEventListener("scrollEnd", () => scrollTimeout.restart(true)); This sounds like a tricky logic challenge unless I'm misunderstanding. What you're describing sounds like "it's linked...but then I want to unlink it....and then it gets totally out of sync and I want to re-synchronize it gradually" but what if the user scrolls forward and it starts re-syncing and then they scroll backwards? What if they resize the page partway through or refresh? I mean I suppose with enough elbow grease you could animate a virtual scrubber like that but it doesn't sound simple.

Some of the general concept reminds me of this demo from this article. Albeit that one is a bit janky with the old school set/clearTimeout approach vs requestAnimationFrame, etc. Or for-the-win of course GSAP ?. I look forward to seeing @OSUblake’s full blown Three.js RTS game when he is done here. ?

¯\_(ツ)_/¯ Maybe @GreenSock will shed some of his genius upon the subject in addition to the nice thoughts both @mikel & @akapowl provided. ?

@Shrug ¯\_(ツ)_/¯ I feel you. It is an intriguing concept, but it has some complexities. The way @GreenSock set ScrollTrigger up is totally genius especially all the (necessary) performance optimizations built into it. In my (our) scenario though the fact that a lot of things are prepared when instantiating the ScrollTrigger(s) takes some mind bending for an old mind like mine. For technical and logical reasons ist simply often not possible to change a SrollTrigger instance on the fly, you have to kill and rebuild it - at lest that's what I found. Probably I was just using it the wrong way. It was a bit tricky and certainly not cost efficient (at least in my use-case it was more 'l'art pour l'art') but in the end it's always just impressing what magic greensock tools have built into. Also humbling :-).

I think you may be misunderstanding - there is no pre-defined list of properties that GSAP can handle or recognize. It’s super flexible. You can literally do this: let myObject = {someProp: 100}; gsap.to(myObject, { someProp: 500, onUpdate: () => console.log(myObject.someProp) }); You mentioned transformOrigin - that’s just a standard CSS property “transform-origin” but you simply camelCase those in JavaScript because JavaScript can’t accommodate dashes like that (it’d be interpreted as a minus sign). Since CSS properties aren’t set directly on the element (they actually go in the element.style object), GSAP has a CSSPlugin that handles all of that automatically for you. There are a few special properties that we’ve added for convenience, mostly for CSS transforms because those are so complicated. GSAP solves all kinds of problems with CSS transforms. There’s a list on the CSSPlugin page of the docs. For example: ”x” - short for transform: translateX(…) ”y” - short for transform: translateY(…) ”rotation” - short for transform: rotate(…deg) ”scaleX” - short for transform: scaleX(…) ”scaleY” - short for transform: scaleY(…) ”scale” - short for transform: scale(….) …etc. (there are more in the docs) Does that clear things up?

Hey @zinjo, You could play with arrays for example. https://codepen.io/mikeK/pen/GRyRXGw?editors=0110 Happy tweening ... Mikel

Hello beaukim gsap.registerPlugin is only available since GSAP3 if I am not mistaken. While you are loading the latest version of GSAP (3.9.1), you are loading a very old version of the PixiPlugin (and also an old version of GSAP, i.e. TweenMax) which you probably should avoid. Does this work better for you? <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.5/pixi.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/PixiPlugin.min.js"></script> <script src="./script.js"></script>

I think you'll want to set up your timeline in a separate useEffect to ensure the element exists. It's also hard to tell what app is doing in this instance (how is it changing to trigger the useEffect). Can you setup a minimal demo in CodeSandbox to show us what's happening?

I don't have much time to dig into this but from a quick glance... You're likely creating a bunch of overlapping/conflicting tweens because you're trying to animate the exact same property of the same object every time you enter or leave a section. So imagine when you go from a red section to an orange section...you leave the red AND enter the orange at the same time, thus it's trying to animate to red AND orange simultaneously. That's a logic issue in your code. You've gotta choose one or the other. My guess is you only need it to happen onEnter and onEnterBack. I'd recommend setting overwrite: true or "auto" on your tweens to prevent conflicts. With the helper function that's doing the smooth scrolling, you can't have the sub-ScrollTriggers also have a scrubbed value other than true due to order-of-operation challenges with the current version. Watch for the next release for some exciting news. https://codepen.io/GreenSock/pen/popoPoN?editors=0010

I think you're misunderstanding quite a few things... You're getting the startTime of the timeline which refers to its start time on the GLOBAL timeline. Why are you doing that? What's your goal? The reason it can be different each time is because your web page may take some time between when GSAP actually loads and when it executes your JavaScript code that creates the timeline. That's totally normal and expected. I'm still baffled as to why you'd ever even want that value in the first place. There is absolutely no difference practically-speaking between _start and startTime() except the latter serves as both a getter and a setter. You should never access or alter anything that starts with _ because it's considered "private". You should never add arbitrary properties into your tween that you don't actually want animated. For example: tl.to("#id", { slideNum: 1 // <-- WHAT? }); That's literally telling GSAP to animate the slideNum property of that element to 1. Remember, GSAP can animate ANY property of ANY object. If you're trying to store raw/arbitrary data in a tween like that, you can use the official "data" property for that. But honestly, this sounds like a bit of an engineering issue - why are you trying to store things like that anyway? I suspect there's a cleaner way of structuring your code/logic to facilitate that. Of course you're welcome to use the "data" property if you want...I'm just saying it smells like a potential engineering issue. Does that clear things up?

I've created functions of all your timelines so that I can call them when ever and add them to other timelines. I've removed the if statement in each click handler, because I couldn't understand what they did. The only issue I have right now is that if the animation is still rotating and you click the button again it will keep rotating and not reset it self https://codepen.io/mvaneijgen/pen/LYeYpjN?editors=0010

It's an "align" parameter. If the target element isn't on top of the pointer (according to the supplied event), setting align to true will move it there immediately.

Hey @jh3y! Nice seeing you around the neighborhood. ? I'm not sure it needs all that code in the "pointerdown", Blake, although I very well may be missing something (it's super late and I'm brain-dead) - couldn't it be this simple?: https://codepen.io/GreenSock/pen/VwyZmEv?editors=0010 I didn't have time to pour over all your other code, @jh3y - were you asking for input about how to structure things differently?

Hey Jhey, I would probably just put an event listener on the input and use startDrag. https://greensock.com/docs/v3/Plugins/Draggable/startDrag() You might be able to do the same thing with Draggable by using the input as the trigger, but I just quickly threw this together. You're probably going to have to tweak it to work your sync function and whatnot, but it's just to give you an idea. Momentum Based Range Slider ✨ (GSAP Draggable + Inertia) (codepen.io)

Such concepts are a tremendous playground. Hey BLAKE, I tried it step-by-step or better edge-by-edge. Complicated calculations are just not my thing. Therefore: The GSAP utils.mapRange() is a really powerful tool. https://codepen.io/mikeK/pen/dqWRXB?editors=1010 It's so much fun... Mikel

Heya! You could maybe toggle a boolean to check is it's looping at the point of entry/exit https://codepen.io/GreenSock/pen/MWOEPJO?editors=0010

Hello bulbo, Here is a list of available kill methods: _________________________________________________________________ kill() Kills the animation entirely or in part depending on the parameters. http://greensock.com/docs/#/HTML5/GSAP/TweenMax/kill/ //kill the entire animation: myAnimation.kill(); //kill only the "x" and "y" properties of the animation (all targets): myAnimation.kill({x:true, y:true}); //kill all parts of the animation related to the target "myObject" (if the tween has multiple targets, the others will not be affected): myAnimation.kill(null, myObject); //kill only the "x" and "y" properties of animations of the target "myObject": myAnimation.kill({x:true, y:true}, myObject); //kill only the "opacity" properties of animations of the targets "myObject1" and "myObject2": myAnimation.kill({opacity:true}, [myObject1, myObject2]); _________________________________________________________________ killAll() Kills all tweens and/or delayedCalls/callbacks, and/or timelines, optionally forcing them to completion first. http://greensock.com/docs/#/HTML5/GSAP/TweenMax/killAll/ //kill everything TweenMax.killAll(); //kill only tweens, but not delayedCalls or timelines TweenMax.killAll(false, true, false, false); //kill only delayedCalls TweenMax.killAll(false, false, true, false); _________________________________________________________________ killChildTweensOf() Kills all tweens of the children of a particular DOM element, optionally forcing them to completion first. http://greensock.com/docs/#/HTML5/GSAP/TweenMax/killChildTweensOf/ <div id="d1"> <div id="d2"> <img src="photo.jpg" id="image" /> </div> </div> <div id="d3"></div> TweenMax.to( document.getElementById("d2"), 1, {css:{left:100}}); TweenMax.to( document.getElementById("image"), 1, {css:{left:100}}); TweenMax.to( document.getElementById("d3"), 1, {css:{left:100}}); //only kills the first 2 tweens because those targets are child elements of the "d1" DOM element. TweenMax.killChildTweensOf( document.getElementById("d1") ); _________________________________________________________________ killTweensOf() Kills all the tweens (or specific tweening properties) of a particular object or the delayedCalls to a particular function. http://greensock.com/docs/#/HTML5/GSAP/TweenMax/killTweensOf/ TweenMax.killTweensOf(myObject); TweenMax.killTweensOf(myObject, {opacity:true, x:true}); _________________________________________________________________ You could use any of the above GSAP methods to kill the animation in part or entirely depending on the parameters and what method you use. Does that help?