Leaderboard

Ooh, this was a fun experiment. I just pasted the SVG <path> data string into the CustomEase editor to convert it, then copied the results into a CustomEase that's used in an animation of the dot's "y" value to -140 because that's the tallest peak and BOOM: https://codepen.io/GreenSock/pen/abWLgwY?editors=0010 🎉 That'll be much more performant than that StackOverflow post thing that constantly loops to try to find the closest x value.

You may get some use out of insertBefore (some information seen here) like the below two examples. https://codepen.io/osublake/pen/YXoEQe https://codepen.io/GreenSock/pen/yLYJodZ Edit: Sorry @GreenSock, I just looked at your Pen after the fact, which is what you are doing. ☺️

Hey @Creativist-Lab You are first setting up your variable paragraph to get the p in each wrap and then you are overwriting that variable, adressing all p in the document with SplitText. What you'd want to do is set up a new variable for your SplitTexts and use that variable you created beforehand to only address the p in that specific wrap. Something like this: let heading = element.querySelector('h2') let paragraph = element.querySelector('p') let splitParagraph = new SplitText(paragraph, {type:"lines"}) https://codepen.io/akapowl/pen/

Welcome to the forum, Cristian! Maybe you want to pin the whole section instead of the container? On the text-changing: Since you are making use of a timeline for the circles here anyway, you could just add tweens for the text and position them on the timeline making use of the position parameter. Maybe something like this (note: this doesn't actually animate; it just exchanges the text in this demo) https://codepen.io/akapowl/pen/441b68fc0191c534a9a0109015b18cf8

Ah. I guess the line shouldn't be moving at a consistent pace in the background. It would take longer for the dot to traverse the big peak than the long horizontal section. You can use SVG paths as easing curves with custom ease.... maybe there's a solution there.

Hey informanimated and welcome to the GreenSock forums. You'd need to position it so that one copy is to the left of the viewport instead of to the right, making sure that the wrapping is happening for the updated positioning. You'd also need to change the sign of the x value in the animation.

Here's a demo accordion. Accordion (codepen.io) Based on techniques from this thread.

Again, thanks for assisting with my question! If you're interested in what that pen was working towards, here is a little pen I threw together leveraging GSAP. https://codepen.io/ekfuhrmann/pen/QWvGBjz

Yeah, you're going to want to find a way to get each paragraph to sit on top of each other, which is totally up to your css positioning method of choice. Using position absolute on a container div for each paragraph is probably the most common approach and totally fine. I'm a fan of the grid layering technique shown below. https://codepen.io/snorkltv/pen/OJmmmPK?editors=0100 Scrolling through things to fade them in and out is tricky and not the best user experience. In my demo above its pretty easy to scroll fast and just blow right through each section.

... just a little joke. https://codepen.io/mikeK/pen/GRmWYMg Happy tweening ... Mikel

Welcome to the forum @Sree Usually it's best if we can see what you tried reflected in your codepen demo and try to help you from there, because people on this forum just don't have the capacity to code out custom solutions for everyone. With regard to this, you'll want to take a look at ScrollTrigger's .matchMedia which is built for exactly doing that (i.e. having different ScrollTriggers active for individual different screensizes). I just quickly threw it in there with your setup and it's already working as I'd expect it to work, so

Hey @Mohd Rejoan If you want smooth-scrollbar to work with the markers, I'd suggest following the approach of the demo in the .scrollerProxy docs - i.e. not using it on the body itself but using a dedicated scroller. Since the markers are placed on the body but you are applying transforms to the body with the smooth-scrolling, they will simply just 'scroll' with the flow if you use smooth-scrollbar (properly) on the body due to how the smooth-scrolling works - I said properly there because you actually have some flaws in your code (e.g. not updating ScrollTrigger on 'scroll' of smo

@OSUblake -- Turns out I was waaaaay over complicating. Technical-issue Tuesdays, I guess. @GreenSock, This makes perfect sense! Thank you!

I suspect the issue is that you're changing the repeatDelay on every repeat. I would definitely NOT do that. Remember that changing the repeatDelay doesn't alter that animation's startTime, thus it'll change where the parent timeline's playhead lines up (and of course the parent's playhead controls where that animation's playhead is too). Here's an image that shows what happens if after the first repeat you change the repeatDelay (red) to 25% of what it was: Notice that as soon as you make that change, the playhead jumps to part-way through the 3rd iteratio

Hey @Brandonjhz You should be able to set once: true for it to only trigger once. Once Boolean - If true, the ScrollTrigger will kill() itself as soon as the end position is reached once. This causes it to stop listening for scroll events and it becomes eligible for garbage collection. This will only call onEnter a maximum of one time as well. It does not kill the associated animation. It's perfect for times when you only want an animation to play once when scrolling forward and never get reset or replayed. It also sets the toggleActions to "play none none none".

Hi Aitor! You should use backgroundImage. background isn't an actual computed property, as it's shorthand that combines everything.

Heya @sosilver! You can tween the progress of a tween or Timeline. It's probably one of my favourite GSAP tricks. That may be a nice solution. ☺️ https://codepen.io/GreenSock/pen/JjNbyGv?editors=1010

You don't have to use toggle. Try onEnter

You can animate strokeDashoffset, and all other svg attributes in gsap just as you would any other property. Maybe your target isn't accurate for your animation? also make sure your case is correct strokeDashOffset strokeDashoffset https://codepen.io/ryan_labar/pen/GRmqbpY For fine tuning your strokeDashArray animation, check out the DrawSVGPlugin: https://greensock.com/docs/v3/Plugins/DrawSVGPlugin Also, we don't recommend using ScrollMagic. GSAP has ScrollTrigger: https://greensock.com/docs/v3/Plugins/ScrollTrigger

Since you're using your param as state, you shouldn't need to pass it directly into the function, as it's an easily accessible variable, and since ticker is going to be constantly running, it'll be able to read that without specifically passing it in via (). Another thing to note: unnamed arrow functions don't cleanup nice inside of ticker / event listeners. You'll want to separate your functions if you can and access/cleanup like: gsap.ticker.add(funcName) gsap.ticker.remove(funcName), which is important with apps like react, otherwise you can end up with unexpected results where you're do

Hi Kire! You can change the timeScale like so. tl2.reverse().timeScale(2); tl1.play().timeScale(1); Another interesting thing you can do is tween the properties of an animation, like it's progress. let tl = gsap.timeline({ paused: true }) ... gsap.to(tl, { progress: 1 }); So maybe we do something like this. We just need some logic to keep track of what is currently active and what to play next. Multiple Timelines (codepen.io)

Hi dagangyang! Not sure how you want that to work, but if you want to combine both, you should probably have a certain area to trigger the rotation. GSAP Drag and Rotate (codepen.io) Using vectors. GSAP Drag, Rotate, and Scale (codepen.io)

Hey, I tried doing it with split text. One timeline is for animating the texts, and other for taking the container up. Adjust the time and distance according to your actual text. Hope this helps. https://codepen.io/tripti1410/pen/YzVPpjP

It sounds like you instead want the stack of images to fade through as you scroll? If so then you can remove the pin, try scrub: true, adjust the start &/or end values and play around with the next var (stagger) and fade var . Just play around until you get everything to your liking (if you want to stick with that example). The ScrollTrigger Docs have detailed information on those things along with links too many ScrollTrigger examples and demos. I sugggest you take time to get familar with the usage.

Welcome to the forum @LivingInAZoo This codepen by @mikel seems to have most of what you described. Hopefully you can modify it to your own needs by using it as a starting point while using the documentation to assist you further. https://codepen.io/mikeK/pen/NWRoQJo

This seems to work, but I don't know if that's the best way to do it. Again, the three.js forums might be able to offer up a better solution. let proxy = { get time() { return mixer.time; }, set time(value) { action.paused = false; mixer.setTime(value); action.paused = true; } }; Three.js GLTF Loader (codepen.io)

Hey @DexteRs Code, Maybe you could implement this logic with two stagger-tweens at a proper time https://codepen.io/mikeK/pen/zYwOzZq Happy tweening ... Mikel

Hey @hmontelongo, Welcome to the GreenSock Forum. https://codepen.io/mikeK/pen/wvdwKXb Happy tweening ... Mikel

This came up on StackOverflow. Here's another version of Blake's pen which might be helpful for future readers: https://codepen.io/ZachSaucier/pen/gOWGKQZ

As someone who gets paid to implement solutions like this, I'm often glad that a workaround is required. @Cassie just taught me something that I can use to impress my customers: giving the impression of a smoothly animated box shadow that I can throw behind buttons/cards to add depth to my designs without introducing jank. Given the fact that it's not straightforward, it's going to be that much harder for other developers (competitors, peers, etc) to implement, which adds value to my offerings. If web design was straightforward, easy, and simple, I'd be out of a job. So while I'm op

Welcome to the forum @brandonifi. You could just pin the surrounding container instead. Not that it is the case in your demo, since you don't have more than that one ScrollTrigger here, but it is worth mentioning that this will lead to misallignments on elements you want to trigger animations later on though, since they can't take that pin-spacing into account. That will be a good usecase for the pinnedContainer property then. Here is a demo with a scrub on that very last section showing what I mean. Hope that helps. Happy scrolling

You've got a bunch of logic issues where you're creating overlapping/conflicting animations. A few tips: You don't have to create a timeline if you're only going to populate it with one tween. Just put your ScrollTrigger on the single tween instead and skip the timeline. It's fine to do it the other way, but it's just a tad wasteful. By default, ScrollTrigger animations will render immediately which means they lock in their starting/ending values right away to maximize performance. In your case, though, you had one TWO animations affecting identical properties and you wanted the

I really like Algolia's API Reference documentation. They explain in details each options quite a clear way. https://www.algolia.com/doc/api-reference/widgets/instantsearch/js/ They also have a guide section with different use cases. Nextjs example folder in their Github is also such a good one. It helped me a lot to get started. I know you are using Codepen but perhaps having a single place with all the examples would be amazing. https://github.com/vercel/next.js/tree/canary/examples Stripe is also a really great one https://stripe.com/docs/api/payment_metho

Hi @Nitro Interactive, Can you provide an example of your setup? React should scope your timelines to each component, so the defaults for the specific timeline should be scoped the same, unless you're setting GSAP's global defaults.

Because it is fun ... https://codepen.io/mikeK/pen/PomGKON Happy tweening ... Mikel

Hey @BhanuSingh, You can morph a single shape (path) to another shape (path). Not a complete group of paths! MorphSVGPlugin.convertToPath: Technically it’s only feasible to morph <path> elements or <polyline>/<polygon> elements, but what if you want to morph a <circle>, <rect>, <ellipse>, or <line>? MorphSVGPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline"); You don't need a conversion for a path. Does that help you further? In the DOCS are a lot of examples.

Performance all comes down to how complicated it is for the browser to render whatever changes you are telling it to do. Transforms and opacity are super fast. Sometimes filters are too, but all it depends. Box shadow is super sloooooowwwwwwWWWWWW. Try getting rid of that. And try adding will-change to the elements you are animating. .container { will-change: transform; } CSS containment can be another performance booster, but sometimes it can mess stuff up. You just have to test and see. .container { contain: content; } https://developer.mozilla.o

https://codepen.io/snorkltv/pen/vYOOgBQ

Exactly what I'm looking for, thank you @mikel Looks like I'll be buying a membership, seems like a great community.

Sounds like you're just using the SVG as an image in canvas. You have to draw the paths in canvas and scale the context, although I doubt you're going to get a huge performance gain. It will probably be faster, but not like 100x. WebGL might be a better an option. https://codepen.io/osublake/pen/WzbKLQ Yeah, that's huge. You screen is raster. Think about how many pixels it has to calculate and how much memory that is going to use. There is no silver bullet when it comes to mobile. Sometimes they just don't have to the power to do

Dear GSAP Team, As promised, I finally get to present my work to you. Without GSAP this would never have been possible. THIS IS NO AD. I just wanted to show what I've done with your incredible tools. https://www.remymartin.com/vsop-limited-edition/ https://www.remymartin.com/xo-red-limited-edition/ https://www.remymartin.com/xo-gold-limited-edition/ https://www.remymartin.com/1738-limited-edition/ There is also a digital greeting card generator. https://www.remymartin.com/eoy-wizard And this card I created for you, the GSAP team. https://ww

... just like here ??? https://codepen.io/mikeK/pen/qBmbEJR?editors=0110 Happy tweening ... Mikel

Hey @AkhilRaja, I feel like I've already given you some direction on how to trigger animations for individual sections in a fake-horizontal-scroll scenario in this recent thread In your codepen above, you did not set an end for your ScrollTrigger - which makes it pretty much unusable - so I suggest, you change that. If you set it to... end: "+=" + (document.querySelector('#PageWrap').scrollWidth - window.innerWidth) ...you won't even have to worry about that 'offset' for your calculations to take into account I mentioned i

Hey @Kire, Another option https://codepen.io/mikeK/pen/KKmdMdX Happy tweening ... Mikel

If you want the dragon to fly in both directions, here is an example: https://codepen.io/mikeK/pen/KKWNvNL Happy scrolling ... Mikel

@sam_tween_journeyer hey, Here it is with scroll trigger. https://codepen.io/tripti1410/pen/rNmVymx?editors=1010

Hey @Peach2tm, There are different options / ways. Here are a few https://codepen.io/mikeK/pen/3e1f3430764662349f3009efbfa2c064 Sorry it is still the old GSAP syntax! Happy tweening ... Mikel

Hey pal - Staggers are a good way to 'offset' the elements. You can also use random values. Does this help? https://codepen.io/cassie-codes/pen/f5b72843034a3bc63f179eba9589b15f

Simple conversion (fork) of @mikel 's demo above to GSAP 3: This may be somewhat of a trivial post to add. But since I'm new here, I thought I would try to adopt a practice of sharing as I learn. That way I'm not all take, take, take. Maybe this will make it that much easier for some other newb like me, though the Migration Guide is plenty helpful already. Only changes are naming/syntax edits in the javascript and replacing the TweenMax resource with GSAP 3. Please feel free to inform me of corrections. Thank you! Seems to still work though. 🙂 https://codepe

Hey, This article will help. https://www.motiontricks.com/svg-dashed-line-animation/