en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en de en en fr en en ca en en en en en en nb nb en en fr en en en en en en en en es en en fr fr en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en sv en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en sv en en en en en en en en en en en nb en hu en en en es en en en es en fr en nl en en en pl en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
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.
Setting a Draggable's initial position
SammyC123 replied to SammyC123's topic in GSAP
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.
SammyC123 posted a topic in GSAP
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...
Tweening Draggable's bounding values... with easing?
SammyC123 replied to SammyC123's topic in GSAP
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.
SammyC123 posted a topic in GSAP
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.
Updating SVG Path Positions Via Wiggles... Again
SammyC123 replied to SammyC123's topic in GSAP
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.
Updating SVG Path Positions Via Wiggles... Again
SammyC123 posted a topic in GSAP
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.
Updating SVG Node Positions Via Wiggles
SammyC123 replied to SammyC123's topic in GSAP
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.
Updating SVG Node Positions Via Wiggles
SammyC123 posted a topic in GSAP
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!
Revealing more of image without changing width/height
SammyC123 replied to SammyC123's topic in GSAP
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.
Revealing more of image without changing width/height
SammyC123 replied to SammyC123's topic in GSAP
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!
Revealing more of image without changing width/height
SammyC123 posted a topic in GSAP
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?
Block Reveal Effect with GreenSock
SammyC123 replied to SammyC123's topic in GSAP
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.
Block Reveal Effect with GreenSock
SammyC123 posted a topic in GSAP
I found an impressive little tutorial over on Codrops about a neat block reveal effect (seen here). Unfortunately, it uses anime.js as its animation library. I've been trying to replicate the effect in GSAP but have found little success. So I was just wondering, are there any pertinent examples of similar effects that you guys have achieved with GreenSock? I've searched pretty exhaustively all around Codepen and this site and can't quite find anything like it. But I know you guys have a much deeper knowledge of the site and what you've accomplished in the past. Thanks for reading. Codepen demo with reduced code also provided below for reference (but it's still anime.js).
Updating a Tween position(x) after its initial completion
SammyC123 replied to SammyC123's topic in GSAP
Wow, how have I never used .progress() before?!? Amazing. Thanks, man!
“Spent today converting an animation to pure CSS, and then into GSAP. GreenSock was an order of magnitude easier. Love it.”
“@greensock is just pure awesomeness. What more can be said?”
“With the incredible functionality, and the mind-blowing customer service, the price of Club GreenSock admission is well worth it!”
“I am more and more amazed every day, and very glad that I decided to get a business license.”
“GSAP makes my job fun, because it allows me to focus on creating rich, engaging web experiences, while GSAP handles much of the implementation details behind the scenes.”
“GreenSock is the best thing that happened to SVG animations since SVG animations.”
“I think I love GreenSock as much as bacon.”
“GSAP and CSS Transitions: I've done both, and its like comparing an F16 to a horse. Take like 10 minutes to try.”
“GSAP is just miles and miles ahead of any animation library out there. Great work!”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.