SammyC123

Sorry to necro an old thread (it's been a busy few months), but I just wanted to say thank you. Due in no small part to your assistance, I was able to arrive at something highly satisfactory. And while I feel like there is an opportunity to do this with an entirely different technique and probably in a much more optimal manner, this certainly sufficed for my purposes. Scroll to see the effect. Every time I work with GSAP or come to these forums, I learn something new and exciting. So, I guess you should consider this a double thank you. I've never worked with a product that has such fantastic and enthusiastic support. GreenSock is incredible in its own right, but the team behind it is really what makes it shine. Happy holidays!

I'm trying to adapt a previous SVG demo... (here) ...to canvas and running into what I believe are fairly basic / newbie issues (both structurally and GSAP-wise). Relevant code begins around line 125 in the demo down below. Questions: Why are the circles tweening back to the bottom? I'm using a gsap.set with overwrite: true so shouldn't that reposition them instantaneously? Likewise, if I change it to a gsap.to and give it a duration (e.g. 10 secs), it will respect that duration. But if I set the duration to 0, it still tweens it as if it were set to 1 second. When I resize the window with the ScrollTrigger enabled, it seems to mess with my debounced resize event. If I comment out the ScrollTrigger, the issue goes away. Is there something I should be doing to avoid this unexpected behavior? I'm sure I'll figure this one out but I thought I'd ask in case it was something simple. Finally, on a structural level, I'm unclear on how to incorporate a ScrollTrigger that updates particle velocity (or timeScale) into this. I don't want to create a new ScrollTrigger every time the draw() or move() method is called. So should I be doing that work inside the ScrollTrigger itself (in an onUpdate)? Or should I be passing ScrollTrigger values into the methods instead? Is there a preferred or recommended style? I've pored over Codepens and this forum but nothing really stands out to me as "obviously correct." I'm trying to emulate as much of Blake's style as possible, but he's a hard act to follow.

Oh my god, that's so frigging cool. (And simple, and elegant.) Jack was spot on. This is a vastly superior way to achieve it. If I wasn't able to see the code, I would have just assumed it was WebGL for that skewing effect. That's such a good demo for so many reasons. Thank you for that. It's yet another for my GSAP bookmarks folder.

That's an interesting approach! Would it be something vaguely like this? https://codepen.io/JC5/pen/qBXjXVB If so, how would I go about making it so the acceleration only occurs during user scroll, and then how would I get GSAP to tween the timeScale value back to the default of 1 when they've finished? That's a fair point. My main concern was with the color banding that occurs from CSS gradients, but I'm sure I can figure a way around that. I'll stick with it for now. Dang it, I suspected as much. I probably should've started with that. Oh well, maybe after I've perfected this version, I can move on to bigger and better things. I feel like I still have a ton to learn before then though. Thanks for the help, Jack!

I've managed to wrangle my example to almost precisely how I want it... I'm just stuck on a couple (hopefully) minor details. I have a ScrollTrigger pinned section in the middle, and it has a bunch of circles within it that slowly rise to the top at varying speeds. I'm using velocity to increase that speed when the user scrolls (thanks to some stellar examples on the forums). My issues: I want the circles section to seamlessly wrap by creating new circles that are always coming up from the bottom. Right now I'm using repeat: -1 after 60 seconds, but that is a subpar experience as the circles typically run out before that timer AND the redraw is jarring. I know this is not ideal. I'm cheating to create my fade out/fade in effect at the top and bottom, respectively. Those are just gradient divs. I'd like to actually have the circles fade in and out appropriately near the edges. Both of these problems seem solvable with something like Blake's SVG clouds experiment: https://codepen.io/osublake/pen/wWXRQN?editors=0010 ...but I am having trouble understanding how to integrate what he did into my code, particularly with regard to ScrollTrigger. On a final note (more of a tangent), would you recommend redoing this in canvas with arcs for the circles instead? I don't particularly like how much computational power this seems to take, but I'm uncertain if the performance benefit of canvas would reasonably offset the increase in complexity. Thanks for reading, and for any assistance, tips, thoughts, or recommendations.

I knew I was doing something wrong on a fundamental and basic level! Turns out it was actually multiple things. ? Thanks, Jack! Every time one of you (team GSAP) posts, I end up learning more in 5 minutes than I do in weeks of self study and research. Know that your assistance is truly appreciated.

I have some circular text rendered to a canvas that I want to advance (or reverse) the direction of based on user scroll. In the demo provided, this is partly hooked up and working, but I'm pretty convinced that I'm going about this completely the wrong way, so I'd be grateful for some collective problem solving. Issues that I could use help on: Is my whole technique for accomplishing this relatively simple effect incorrect? If so, are there any relevant examples for how to go about doing something similar? I've scoured both Codepen and these forums and not come up with much. How would I get the rotate animation to use easing for a smoother effect? Since the rendering is taking place in canvas, I can't exactly use GSAP for it, can I? I don't want to have to build out an entire easing system for the renderer. Appreciate anyone taking the time to offer their wisdom.

I'm truly blown away. The breadth and depth of information contained in your post is enough to save me weeks or months of headaches and Google / Stackoverflow research, and your examples are incredibly well structured and easy to follow. I really can't thank you enough, @OSUblake. This is fantastic. You're one of the reasons GSAP is worth every penny.

Oh wow, both of those Codepens were a huge help. Thanks, Blake! I'm a lot closer than I was, but I think I still have a long way to go. I've taken a different approach: Centered canvas elements via translate so everything starts at 0,0 Drew in the lines using lineTo() Faked the shrinking transition by drawing a rect on top of the lines, then clearing the lines, then shrinking the rect (probably not the best solution, but sufficient for now) Lastly, I'm working toward making the canvas be responsive on resize while keeping the elements within it fixed in size But there are a few things I'm still struggling with. When the rect comes in, it's seemingly a different stroke color than the lines... closer to light gray than white. Any idea why that is? I'm scratching my head trying to make the rect shrink from all sides equally to the center, rather than shrinking into the top left. Animating point5(via the function animateLineTopLeftOut) happens instantaneously and I don't quite understand why. I think it has to do with the fact that I need to animate both x and y properties, but it's unclear to me. If you have any more wisdom to share, I'd greatly appreciate it. I don't want to keep leaning on you for answers, but you always make it look so easy on these forums. ? https://codepen.io/codepenrequiredit/pen/eYvYdoJ?editors=0010

My task has two components. First, I'm trying to draw a 800x800 pixel square in canvas via lineTo, but I'm not sure I understand how to use the onUpdate callback with lineTo to properly execute it. If I shift the y value, it skews the line rather continuing it. How would I achieve a point-to-point effect, as if you're drawing each side of the square consecutively? If someone could help me understand how to draw a straight line down after the initial horizontal line is drawn in the Codepen, I can probably take it from there. My second issue, and one that seems easy once I get this figured out, is how do I then shrink that square to half its size (so 400x400)? Seems like I could use the same approach, but with each callback shrink the total line size (length and width) little by little until I end up at the appropriate size. All thoughts and suggestions are greatly appreciated.

That seems to accomplish my goals. Thanks!

After the initial animations (fade up with autoAlpha and y), if you begin to scroll, Locomotive Scroll's parallax takes over but the position of the trees jump down. I'm assuming this is because when Locomotive initializes, it remembers the position of those elements, and then GSAP adjusts them afterward. Then when Locomotive takes back over, they snap back to the position Locomotive remembers. Is there a simple way to fix this? Thanks in advance. Edit: Looks like the embed window for Codepen isn't showing it. You need to click in to the example.

Yep, I'm a dumbass, as usual. ? I thought it wouldn't fit my use-case because it snaps back to the boundaries immediately in your example above when you try to drag it, but it turns out that's precisely the behavior I needed. Although I'm still not sure I understand the relationship that occurs when you offset it by a percentage, i.e. {x: "-20%"} It seems to offset everything, including the boundaries. Is that intended behavior? Anyway, thank you for pointing out the error of my ways, @PointC! And doubly thank you for blowing my mind with .delayedCall()... I had no idea that even existed and it will no doubt come in very handy in the future.

Thank you for the reply, @PointC! Unfortunately, that standard method seemingly does not work with the pen I linked, which is what caused me to create this thread to begin with. You can test it yourself by adding the following code to the pen above: TweenMax.set(".draggable", {x: 125}); It makes no impact whatsoever on the position of the draggable element (the map). Nor does tweening it seem to have the proper effect. Perhaps I'm not calling it at the right moment, or maybe I need to better understand the .update() method, as referenced here? Either way, thank you again for trying to help.

On an initial load, how would I go about centering the map on, say, Africa? I've checked the documentation and looked at various threads, including this one, but those solutions do not seem to work for me. And if I translate with percentages, it moves the entire map to a relative position inside its container, creating a large gap. I feel like I have to be missing something simple, but it's eluding me...

Yes, that's perfect! Thank you. That's so much more elegant and simple than what I thought I needed. My whole idea of tweening the container values seems pretty silly in hindsight. ? You GreenSock guys, I swear... you're just the best. Every single time.

When you're using applyBounds() to set new container boundaries (e.g. on a resize event), is there a way to make the old boundary values tween to the new ones... with easing? For context: I'm using Draggable on a fullscreen map element and then using applyBounds when I show/hide a sidebar. It's a rather jarring experience when the map is forced into the new boundaries. The whole screen seemingly jumps. EDIT: Added a Codepen. To replicate this, drag the map all the way to the left, then toggle the sidebar closed. You will see how the map jumps to fit the new boundaries. I would like to tween it to resize the bounds in tandem with the sidebar toggle animation... slowly and smoothly.

You're a godsend. That was exactly what I was missing. Thank you a ton! And yeah, the code needs quite a bit of cleanup.

A few weeks ago, Blake graciously instructed me in the use of .getItem() and it helped me make significant progress, but I was forced to abandon that structure of SVG in favor of something more controlled. I'm closer to being where I want, but it's becoming clear that I'm failing to understand precisely how to update the path locations as the timeline is running. Line 214: onUpdate: updatePath, is simply not doing the trick like I thought it would. What am I missing? I think I need to feed the coordinates of the circles ('handles') to update the paths, but I'm not sure how to get that data in or out. As a secondary issue, all the circles are 'floating' in the exact same direction at the same time. I want them to be diverse, but I think it's happening because I initiated all of them simultaneously by defining the 'handle' var as all 'circle' elements (Line 187). Been scratching my head for a full day on this one. I feel like it should be a relatively easy fix, but I'm just not seeing it. Thanks for any potential assistance.

Holy cow, I can't believe you responded so quickly! I shouldn't have even stepped away from my computer. Thank you so much, @OSUblake. That is exactly what I was looking for, and you did it in record time. Like Jack said, that is a whole lot of Greensock goodness in one tidy little Codepen. I never cease to be amazed when I visit this forum.

Hi guys! I'm trying to combine two examples I've seen - one where SVG nodes can be moved and the strokes/lines update their positions (created by Blake, located here: https://codepen.io/osublake/pen/QdbQjN) And another where objects randomly move around via the CustomWiggle plugin (located here: https://codepen.io/GreenSock/pen/3566533ea0bf699796bb4d696bd1ca50) I'm struggling to understand how to pass X/Y coordinates from the Wiggles to update the SVG via the moveAction() function. The end goal is to have the points movable via drag, but also to have them move around on their own when not being dragged. I'd settle for them just moving on their own with the SVG lines updating correctly to their new coordinates as they float through space, though. Thanks in advance for any possible help you can offer. You guys really are the best. I can't believe I found those two examples as is!

Dude, duuuuuuuuude! Blake, you are such a fountain of knowledge. The scale/counter-scale method is precisely what I was looking to achieve, and you even preempted my headaches with will-change. Thank you yet again for the insight and the links to other resources. You are one of the main reasons this community is so incredible.

Blake, this is so cool! Thank you. I'm trying to whip something up in canvas now. I should have thought of it before, it's just so much more work than a simple line of TweenMax Luckily, your Codepen is there to help me along... thanks again!

Is it possible to scale an image (from what is effectively a thumbnail) to the full browser width, while revealing more of the image itself? Basically growing a div's background image from just a section of it to the full thing. The example I provided does this with width/height tweens, but I know that is not the best solution (for performance reasons). Curious if there's a better method for accomplishing this via GreenSock. I know you could also use another element to mask it, but that seems like a very clumsy solution. Thoughts from the experts?

Holy cow, you put that out fast! That's exactly what I was looking for... you are the master. That whole bottom section under // Animate it is what ruined me. What you did is perfect and even seems to be smoother (though maybe my eyes are playing tricks). Thank you so much! And I agree, the structure of most Codrops stuff is a bit off. They do things in a very curious manner.