Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

21 Newbie

About SammyC123

  • Rank
    Advanced Member

Recent Profile Visitors

1,669 profile views
  1. 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.
  2. 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 wit
  3. 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.
  4. 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
  5. 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
  6. 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.
  7. 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 ha
  8. 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? Eith
  9. 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...
  10. 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.
  11. 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
  12. 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.
  13. 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 t
  14. 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.