Leaderboard

While I definitely agree that a lot of times that might be true - probably even most of the time - I certainly wouldn't agree with 100%. There definitely are usecases where an onReverse can be handy in cases outside of events. That's why there also is a work-flow example in the helper-functions section of the docs that explains how to create your own custom onReverse() callback functionality, @MarcoCuel. https://gsap.com/docs/v3/HelperFunctions/ https://gsap.com/docs/v3/HelperFunctions/helpers/trackDirection/ It comes with caveats though - e.g. logically it will take one tick to update the direction as is explained in the orange 'caution' box over there - thus you might have to accomodate your own logic to that fact if you want to trigger things onReverse appropriately then. Some of the reasons that it is not included in GSAP's core are, that having it external like that keeps the core lightweight and doesn't require extra processing on the vast majority of animations that don't need this functionality. That last part comes directly from Jack (@GreenSock). If you have more questions, I'm sure he'll be able to answer them.

Looks like Mitchel was right 👍- for that you really wouldn't need an onReverse callback. Here's just two ways you could handle something like that - and there's probably a couple others beyond those. I hope these will be helpful already, though: Depending on the index of the dot (to make sure neither the first nor the last will get toggled at the end in any direction), you could .add() functions before and after each of your tweens to toggle the class . https://gsap.com/docs/v3/GSAP/Timeline/add()/ https://codepen.io/akapowl/pen/yLwxXgX Or (even better) with similar logic with regard to the index, have things handle via GSAP altogether with .set() calls; unless you really need that active class, like maybe for something else outside of the pure styling. https://gsap.com/docs/v3/GSAP/Timeline/set() https://codepen.io/akapowl/pen/yLwxXMX Some hints with regard to syntax: // Instead of this: tl.to(dot, { rotate: "180deg" }) // You could just do this: tl.to(dot, { rotation: 180 }) https://gsap.com/docs/v3/GSAP/CorePlugins/CSS Also there is no such ease as 'linear' - if you want linear interpolation, ease: 'none' is what your looking for. If I am not mistaken, any invalid ease like that would fall back to the default ease of 'power1.out'. Edit: It looks like 'linear' seems to be accepted though, and will result in no easing 🤔 And apparently that is the case since like forever in GSAP3 ...didn't even know that 😅 https://gsap.com/docs/v3/Eases/

That's probably mostly a concern of your CSS styling and nothing GSAP related. Your cursor is set to position: absolute - that will be in relation to the body in your case. The page keeps on scrolling vertically, even if you fake a horizontal scrolling movement. Thus you cursor will also move up as it keeps scrolling with the body. The easiest way would probably be to just set it to position: fixed isntead.

You don't see anything because there is no stroke visible to animate. DrawSVG animates the stroke of and element. Here is your pen with the stroke visible and thus you can see what DrawSVG is doing. What you're probably are looking for to draw the paths in the font you've outline here, that is not possible by default, but our own @PointC got you covert and has written a tutorial that walks you through the process of creating this, see https://www.motiontricks.com/svg-calligraphy-handwriting-animation/ Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/oNVPLOv

Hi @Chris_9111 welcome to the forum! Just wrap your elements in an extra element that takes up the space and move the inside element. Here I've given 02 an .outer outlined in red which stays in place when the animation happens. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/RwdYWyN?editors=0100

Your issue is probably that you're adding classes to your elements and now have to fix everything that ScrollTrigger does out of the box if you just use tweens. If you create an animation you want to happen in a timeline and then hook that up to ScrollTrigger (eg animate .from() an opacity of 0 to the default 1 of the browser) const tl = gsap.timeline({...yourScrollTriggerSettings}); tl.from(".animation", {opacity: 0}); // Aniamte from invisable to viable tl.to(".animation", {opacity: 0});// Aniamte from viable to invisable The beauty of GSAP is that you can build what ever you like in what ever way you like, but there are a lot of things already solved for you if you use it the "intended" way. If you have some dynamic values that change on resize/refresh you can use a function based value in a tween to force it to recalculate on .refresh(). https://gsap.com/docs/v3/GSAP/gsap.to()/#function-based-values If you still need help please include a minimal demo showing us what you've already tried. Please don't include your whole project, just some coloured divs to demonstrate the issue. Hope it helps and happy tweening!

@Rodrigo it's finally fixed! It was my mistake on forgetting to refactor the way I was retrieving the height of some elements, that was necessary at certain point, but not anymore. Code blindness 😅 But it totally worth, as i didn't know that way of indenting and identifying the markers. That's soooo useful!!! Thanks a lot! Thanks to @mvaneijgen too

Hi, On top of needing a minimal demo there is a clear difference between add and call methods: https://gsap.com/docs/v3/GSAP/Timeline/call() https://gsap.com/docs/v3/GSAP/Timeline/add() In this case call is just executing the functions you pass to it, the call method doesn't really care about what's returned from the function, that's why you're seeing both animations happening at the same time, since they're executed one after the other almost immediately. The add method on the other hand, as the name indicates, adds to the timeline what is returned from the callback (in case of being a function) or directly adding a label, a tween/timeline or a callback as well. In the case of being a GSAP Tween/Timeline it will add that instance's duration to the timeline so calling add twice should work in the way you expect: master .add(blue, []) .add(pink, []) Hopefully this helps. Happy Tweening!

Hi @tylernorquist welcome to the forum! I would create a separate ScrollTrigger for the circles and let GSAP handle all the pinning (setting the element to position: fixed) I've also removes some other CSS properties. There are still some small gaps, but that has probably to do with the image it self, or some paddings on the page. What I've done is moved the circles to the top of the HTML set position: absolute; to the bottom of the page, then it gets pinned by ScrollTrigger and that ScrollTrigger also un pins it when the element with the class of .bottom, hits the bottom of the page (around the time the .green block is done). 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/MWxqvqR?editors=0010

I have to say, what a fun animation! Great work and awesome solution @akapowl!

Hi, On top of Paul's great advice you should also use GSAP QuickTo for this: https://gsap.com/docs/v3/GSAP/gsap.quickTo() Here is a fork of your demo: https://codepen.io/GreenSock/pen/ExMeZwp Hopefully this helps. Happy Tweening!

Hi @Pioter and welcome to the GSAP Forums! Your code looks good, maybe the only change I'd make is to use just one Tween for showing/hiding the button and play/reverse it: const showButtonTween = useRef(); const { contextSafe } = useGSAP(() => { showButtonTween.current = gsap.to(playButton.current, { opacity: 1, scale: 1, duration: 0.3, }).reverse(); }); const togglePlayButton = () => { const { current } = showButtonTween; current.reversed(!current.reversed()); }; Then in the JSX: <div ref={videoContainer} id="video-container" onMouseMove={(e) => movePlayButton(e)} onMouseEnter={togglePlayButton} onMouseLeave={togglePlayButton} className="w-[100%] h-[100%] mt-[1vw] relative flex items-center justify-center cursor-none" > </div> Also be sure to check if you don't get TypeScript errors with this: const movePlayButton = contextSafe((e: React.MouseEvent) => {})); We've seen that this works: const movePlayButton = contextSafe(() => {}) as React.MouseEventHandler; You can find more info in this thread: Hopefully this helps. Happy Tweening!

Hi, Hopefully this demo helps as well: https://codepen.io/GreenSock/pen/XWOeLEb Happy Tweening!

The problem is your CSS the background-clip seems not to get set to the children, the animation works fine. https://codepen.io/mvaneijgen/pen/qBvMOWy Check out below topics with possible solutions for your problem. Hope it helps and happy tweening!

Hi, @mvaneijgen thankyou so much for your effort and time, yes i was looking to achieve this similar effect, little modification can do the job. Thanks for ur reply much Love ❤❤❤.

Great implementation! Seems to work great at my end, the only thing you'll need to tweak now is the distances everything moves. So in my example everything moved based on the window hight, but for your example you probably want to tab in to the height of the element. You also want to offset the cards by the height of the menu bar (I've just set it to a random value for now) I personally Always like to use a timeline, to separate the ScrollTrigger from the animation logic and have found that a animation is never as simple as one tween and if it it there is always time to optimise later. You now could also look into having the sections snap when you've scrolled a little, check out the snap/snapTo properties in the docs https://gsap.com/docs/v3/Plugins/ScrollTrigger/ Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/oNVPgmZ?editors=0010

I'm not sure what you're calling a 'callback' we have eventCallbacks in the docs, but that is more when a tween has finished or it starting onComplete, onStart https://gsap.com/docs/v3/GSAP/Tween/eventCallback()/ In my above pen I've used Function-based values which you can read more about here https://gsap.com/docs/v3/GSAP/gsap.to()/#function-based-values. If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/ explains a lot in a nice overview, but the docs is also a great resource in general. Personally I almost never use single gsap tweens, but I always gravitate to using a timeline. It is great in a pinch, but with a timeline you get so much more control, see below pen where a timeline has all these animations on it and ScrollTrigger controls that timeline on scrolling, some tweens start at the same time as other twens using the position parameter and other tweens wait for their turn, this al gets explained in the getting started guide, so be sure to check it out. If you need any further assistance, please show us what you've already tried and provide a minimal demo, so that we can dive directly in the code. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/LYaBqrm?editors=0010

If you need the text without waiting the whole page load you may check if the fonts / fonts are loaded as follows: document.fonts.load('1rem "Martel"').then(() => { document.fonts.load('1rem "Work Sans"').then(() => { initsplit(); }) })

Hey @Hysteresis, You should coordinate line draw and scroll movement also so that the course of your green line (the tip) does not run out of the viewport, is always in the picture. Here's an example ... https://codepen.io/mikeK/pen/MWoaXjV/13e3ffd92460b9cd26b1e5f793b640f8?editors=0110 Happy scrolling ... Mikel

It's not a GSAP/ScrollTrigger issue - it's just a logic thing in the way you've set things up. You could simply add this to your ScrollTrigger(s): onRefresh: self => self.progress && self.animation.progress(1), Basically, if the scroll position is anywhere past the ScrollTrigger's start, force the animation to its end. Does that help?

Hi teamcolab , In addition to Jonathan's great advice, you can also add a label during the testing process (just move it where you need it as you're designing), pause the timeline and play() from that point. The code would look like this: tl = new TimelineMax({paused:true}); tl.to(element,2, {x:400}) .to(element,2, {x:400}) .add("testingLabel") .to(element ,2, {x:400}); tl.play("testingLabel") Here's a really simple CodePen to show it in action: http://codepen.io/PointC/pen/GoPNwP Happy tweening.

Hello teamcolab, and Welcome to the GreenSock Forum! You can use the GSAP seek() method http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/seek/ //jumps to exactly 2 seconds myAnimation.seek(2); //jumps to exactly 2 seconds but doesn't suppress events during the initial move: myAnimation.seek(2, false); //jumps to the "myLabel" label myAnimation.seek("myLabel"); seek() Jumps to a specific time (or label) without affecting whether or not the instance is paused or reversed. Jumps to a specific time (or label) without affecting whether or not the instance is paused or reversed. If there are any events/callbacks inbetween where the playhead was and the new time, they will not be triggered because by default suppressEvents (the 2nd parameter) is true. Think of it like picking the needle up on a record player and moving it to a new position before placing it back on the record. If, however, you do not want the events/callbacks suppressed during that initial move, simply set the suppressEvents parameter to false. Hope this helps!